Html.Partialを含む要素にForeach Knockoutを使用する方法

Question

私たちはmvc5でknockout.jsを使用しています。 ビューは、主に3つのdiv要素が含まれ、それらのそれぞれが別々のpartialViewが含まれ、それはサーバ側でHtml.Partial機能によってロードされ

<div id="wrapper"> 
    <div data-bind="css:{enabled:MyArray()[0].enable}"> 
     <label data-bind="text:MyArray()[0].title"></label> 
     @Html.Partial(VirtualPathUtility.ToAbsolute("~/Areas/SelectionBar/Views/SelectionBar/SelectDivision.cshtml")) 
    </div> 

    <div data-bind="css:{enabled:MyArray()[1].enable}"> 
     <label data-bind="text:MyArray()[1].title"></label> 
     @Html.Partial(VirtualPathUtility.ToAbsolute("~/Areas/SelectionBar/Views/SelectionBar/SelectSM.cshtml")) 
    </div> 

    <div data-bind="css:{enabled:MyArray()[2].enable}"> 
     <label data-bind="text:MyArray()[2].title"></label> 
     @Html.Partial(VirtualPathUtility.ToAbsolute("~/Areas/SelectionBar/Views/SelectionBar/SelectSM.cshtml")) 
    </div> 
</div> 

ViewModelには、次のようになります。

function getArray(){ 
var myObj1 = { "name": "menu1", "title": "Select SM", "enable": true }; 
var myObj2 = { "name": "menu2", "title": "Select Division", "enable": true }; 
var myObj3 = { "name": "menu3", "title": "Search", "enable": false }; 
return [myObj1, myObj2, myObj3]; 
} 
function SelectBarViweModel(){ 
var self = this; 
self.MyArray = ko.observableArray(getArray()); 
self.IsSingleMode = ko.observable(true); 
} 

コードの多くは繰り返しているので、KnockoutのForeachをMyArrayに使いたいと思っていました。そうすれば、Divを一度書くだけで済むので、配列のインデックスを指定する必要はありません（MyArray（）[0]またはMyArray（）[1]（ ）それぞれのDivsに表示され、サーバー側にロードされる@ Html.Partial 各要素に@Html.Partialのレンダリングをサポートしながら、Foreachを使用して再利用可能なコードを書く方法は？

Answer 1

@{ }ブロックのメニュー構造を定義し、@foreach (var menu in yourMenus) { ... }経由でループすることで、すべてのサーバー側で行うことができます。サーバーサイドの専門家はいませんが、間違いなく良い選択です。いくつかの例が見つかりましたhere 。

あなたはクライアント側をレンダリングしたいのですが、まだあなたの意見の再利用可能な部品のためのパーシャルを使用したい場合は、私がテンプレートを使用してお勧めします。

あなたがそうのようにどこかで共有レイアウトで、あなたのテンプレートを定義したい：

<script type="text/html" id="t-selectSM"> 
    <div data-bind="css:{ enabled: enabled }"> 
    <label data-bind="text: title"></label> 
    @Html.Partial(VirtualPathUtility.ToAbsolute("~/Areas/SelectionBar/Views/SelectionBar/SelectDivision.cshtml")) 
    </div> 
<script> 

<script type="text/html" id="t-selectDivision"> 
    <div data-bind="css:{ enabled: enabled }"> 
    <label data-bind="text: title"></label> 
    @Html.Partial(VirtualPathUtility.ToAbsolute("~/Areas/SelectionBar/Views/SelectionBar/SelectSM.cshtml")) 
    </div> 
<script> 

今、あなたのviewmodelで、あなたはこれらのテンプレートへの参照を追加し、ビューをレンダリングするためにそれらを使用することができます。

var MenuVM = function() { 
    this.getTemplate = function(menu) { 
    return menu.template; 
    }; 

    this.menus = [ 
    { 
     name: "menu1", 
     title: "My Menu Title", 
     template: "t-selectDivsion", 
     enabled: true 
    }, { 
     name: "menu2", 
     title: "Another Menu Title", 
     template: "t-selectSM", 
     enabled: false 
    } 
    ]; 
}; 

HTMLで

：個人的に

<div data-bind='template: { 
        name: getTemplate, 
        foreach: menus 
       }'></div>