KnockoutJS observableArray с шаблоном и foreach

Question

Я пытаюсь связать наблюдаемый массив нокаутом с моим пользовательским интерфейсом, используя флажок foreach и checkbox, а затем создайте массив на основе проверенного.

Я получаю эту ошибку: Uncaught ReferenceError: невозможно обработать привязку "template: function() ...".

Вот мой HTML:

<dl data-bind="template: { name: 'QuarterTemplate', foreach: Quarter, templateOptions: { selections: SelectedQuarters } }"></dl> 

<script id="QuarterTemplate" type="text/html"> 
<dd> 
    <label> 
     <input type="checkbox" data-bind="attr: { value: quarter }, checked: $item.selections" /> 
     <a data-bind="text: quarter" ></a> 
    </label> 
</dd> 
</script> 

Вот мой Нокаут ViewModel:

function ViewModel() { 

this.Quarter = ko.observableArray([ 
    { quarter: "Q1" }, 
    { quarter: "Q2" }, 
    { quarter: "Q3" }, 
    { quarter: "Q4" } 
]); 

this.SelectedQuarters = ko.observableArray(); 

this.SelectedQuarters.subscribe(function() { 
    console.log(this.SelectedQuarters()); 
}); 

} 

$(document).ready(function() { 

    ko.applyBindings(new ViewModel()); 

}); 

Я также скрипку установить:

http://jsfiddle.net/SpRLP/1/

В конце концов, что я хочу чтобы увидеть в консоли что-то вроде этого:

Q1

Q1, Q3

Q1, Q3, Q2

Q1, Q3, Q2, Q4

Q1, Q2, Q4

Answer 1

templateOptions доступна только тогда, когда используя jQuery Templates plugin. При использовании базового шаблона KO наиболее часто используется $root или $parent для привязки таким образом. Вот некоторые документы по этим context variables.

Таким образом, это будет выглядеть так:

<dl data-bind="template: { name: 'QuarterTemplate', foreach: Quarter }"></dl> 

<script id="QuarterTemplate" type="text/html"> 
    <dd> 
     <label> 
      <input type="checkbox" data-bind="attr: { value: quarter }, checked: $parent.SelectedQuarters" /> 
      <a data-bind="text: quarter" ></a> 
      </label> 
</dd> 
</script> 

Вот обновленная скрипка: http://jsfiddle.net/rniemeyer/tY5TF/

Answer 2

Спасибо. Это помогло мне установить мои флажки ObservableArray. Я адаптировал свой код к вашему примеру и получил больше информации в классе JS, который вы можете показать.

// Define a "Quarter" class 
 
function Quarter(id, name) { 
 
    return { 
 
     id : ko.observable(id), 
 
     name : ko.observable(name) 
 
    }; 
 
} 
 

 
var viewModel = { 
 
    quarters : ko.observableArray([ 
 
    new Quarter("Q1", "First Quarter"), 
 
    new Quarter("Q2", "Second Quarter"), 
 
    new Quarter("Q3", "Third Quarter"), 
 
    new Quarter("Q4", "Fourth Quarter"), 
 
    ]), 
 
    
 
    selectedQuarters : ko.observableArray(["Q1", "Q3"]) 
 
}; 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
<ul data-bind="template: { name: 'QuarterTemplate', foreach: quarters }"></ul> 
 

 
<script id="QuarterTemplate" type="text/html"> 
 
    <li> 
 
     <input type="checkbox" data-bind="checkedValue: id, checked: $parent.selectedQuarters" /> 
 
     <span data-bind="text: name"></span> 
 
    </li> 
 
</script> 
 

 
<pre data-bind="text: ko.toJSON(selectedQuarters, null, 2)"></pre>