如何在包含Html.Partial的元素上使用Foreach Knockout

我們在mvc5中使用了knockout.js。該視圖包含3個主要的DIV，它們中的每一個包含一個單獨的partialView，由該Html.Partial功能裝載在服務器側如何在包含Html.Partial的元素上使用Foreach Knockout

<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>

視圖模型看起來像這樣：

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); 
}

由於很多代碼都會重複，我們希望在MyArray上使用Knockout的Foreach。這樣我們只需要編寫一次Div，我們就不必指定數組的索引（MyArray（）[0]或MyArray（）[1]（）但是我們遇到了一個問題，因爲@ Html.Partial出現在每一個的div，並加載在服務器端。我們如何編寫使用foreach可重用的代碼，同時支持在每個元素的渲染@ Html.Partial的？

謝謝！

來源

2017-02-12 gnazim

就個人而言，我認爲你需要使周圍要被仁的數據決定客戶端或服務器。試圖讓客戶端和服務器知道對方會需要很多代碼，這些代碼很難維護。 –

你可以嘗試通過在@{ }塊中定義菜單結構並通過@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>

，在您的視圖模型，你可以添加對這些模板，並用它們來渲染你的看法：

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>

來源

2017-02-13 09:40:13 user3297291

你的想法（在服務器端完成）幫助了我們很多！我們已經成功實施了謝謝！ – gnazim

如何在包含Html.Partial的元素上使用Foreach Knockout

回答

相關問題