使用knockout和jquery模板向特定div添加小部件

模板可能檢查綁定到的元素的屬性，然後確定它是否應該實際綁定到它？使用knockout和jquery模板向特定div添加小部件

這個想法是，我將有一個div秒的數量和模板將綁定到每個div n次，這取決於div的id和數據中的id。

<div id="col1" class="col" data-bind="template: 'widgetsTemplate'"> 
</div> 

<div id="col2" class="col" data-bind="template: 'widgetsTemplate'">  
</div> 

@*<div data-bind="template: 'widgetsTemplate'" />*@ 
<script id="widgetsTemplate" type="text/x-jquery-tmpl"> 
<div> 
    {{each(index,widget) widgets}} 
     {{if widget.col == cols[index].id}} 
      <div>${widget.name}</div> 
     {{/if}} 
    {{/each}} 
</div> 
</script>

通訊JS：

var cols = $('.col'); 
function widget(name, col) { 
    return { 
     name: ko.observable(name), 
     col: ko.observable(col) 
    }; 
} 
var viewModel = { 
    widgets: ko.observableArray(
    [new widget("Widget 1", col1), 
    new widget("Widget 2", col2)]) 
}; 
ko.applyBindings(viewModel);

這是據我這個想法得到了，但我似乎並沒有能夠取得進展。

任何想法，將不勝感激。

來源

2011-07-16 Beats

您希望有一個帶小工具的列表，並讓這些模板找出他們需要使用哪些小工具？例如，你能不能將一個字符串數組綁定到你的模板。然後每個字符串代表一個小部件名稱，併爲每個字符串呈現一個div。然後讓jquery查找具有「widget」屬性（例如）的div，並將適當的小部件綁定到它（假設這些小部件是jquery插件）。沒有發佈它作爲答案，因爲我有點不確定問題是什麼。因爲模板只會綁定到一個元素，如果有一個數據綁定：「模板」屬性 –

我知道你可以通過查看函數的結果動態地改變要綁定的模板。也許你可以改變實現你的想法的方式。

在示例代碼中，您可以在模板內部決定要呈現的任何內容。您可以在頂層決定並通過檢查數據來選擇要綁定的模板。這是一個example。

來源

2011-07-17 00:41:32 Luffy

謝謝你們 - 我發現這是基於你說的是什麼技巧很好http://jsfiddle.net/rniemeyer/wvDTA/ – Beats

使用knockout和jquery模板向特定div添加小部件

回答

相關問題