Jquery ui tabs with knockout using mvc 3 how to im

问题:

I am developing a web app using asp.net mvc 3. I have a main layout page which contains jquery ui tabs.

I am using knockout.js binding tool. My issue is from my tabs how can I go the relevant controller to return the view. Example is I click on tasks project so in the container for the view it should show the tasks page as rendered by the tasks controller

Any help would be good

Thanks

回答1:

The simplest solution is to us RenderPartial. Then you can either bind each tab via knockout, or bind the whole lot of them.

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <% Html.RenderPartial("TabOne", Model);%>
</div>
<div id="tabs-2">
    <% Html.RenderPartial("TabTwo", Model);%>
</div>
<div id="tabs-3">
    <% Html.RenderPartial("TabThree", Model);%>
</div>

This assumes that the html content doesn't vary based off of the data, or at least not so much that knockout can't take care of it. If your html varies a lot you can use a routing system like Crossroads.js (http://millermedeiros.github.com/crossroads.js/) and fetch the data for the div using ajax.