Добавление виджетов в определенный div с использованием шаблонов knockout и jquery

Question

Возможно ли, чтобы шаблон проверял атрибут элемента, с которым он связан, и затем решал, должен ли он быть на самом деле связан с ним?

Идея состоит в том, что у меня будет число div с, и шаблон будет привязываться к каждому div n раз в зависимости от идентификатора div и идентификатора в данных.

<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

Я знаю, что вы можете динамически менять шаблон для привязки, просматривая результат функции.Может быть, вы можете изменить способ реализации своей идеи.

В примере кода вы решаете внутри шаблона все, что хотите визуализировать.На верхнем уровне вы можете решить, какой шаблон связать, изучив данные.Вот пример .