Question

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

我的想法是，我会有一些div个，模板会绑定到每个div n次，具体取决于div的id和数据中的id。 / p>

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

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

1 个答案: