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

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

Я получаю эту ошибку: 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


foreach knockout.js ko.observablearray
person user3062114    schedule 19.03.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Итак, это будет выглядеть так:

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

person RP Niemeyer    schedule 19.03.2014

arrow_upward
0
arrow_downward

Спасибо. Это помогло мне заставить мои флажки 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>

person Rubenisme    schedule 08.06.2016