使用敲除和 jquery 模板将小部件添加到特定 div

Question

模板是否可以检查它被绑定到的元素的属性，然后决定它是否应该实际绑定到它？

我的想法是我将拥有多个divs，并且模板将绑定到每个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);

这是我的想法，但我似乎无法取得进展。

任何想法都将不胜感激。

Answer 1

我知道您可以通过查看函数的结果来动态更改要绑定的模板。也许你可以改变实现你的想法的方式。

在示例代码中，您可以在模板中决定要呈现的任何内容。您可以在顶层决定并通过检查数据来选择要绑定的模板。这是example。