Knockout: доступ к экземпляру viewmodel в шаблоне HTML

Question

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

var AilmentItem = function () {
    this.SelectedAilment = ko.observable();
}

function AilmentsViewModel() {
    this.Ailments = ko.observableArray([new AilmentItem()]);
    this.AilmentsType = ko.observableArray([{ Name: 'Diabetes' }, { Name: 'Arthritis' }, { Name: 'High BP'}]);
}

HTML-скрипт

<script type="text/javascript">
    $(function () {
        var AilmentsVM = new AilmentsViewModel();
        ko.applyBindings(AilmentsVM, $('#Ailments')[0]);
    });
</script>
<div id="Ailments">
    <div>
        <table>
            <tbody data-bind='template: { name: "ailmentRowTemplate", foreach: Ailments }'>
            </tbody>
        </table>
    </div>
</div>
<script type="text/html" id="ailmentRowTemplate">
    <tr>
        <td><select data-bind="options: AilmentsVM.AilmentsType(),  optionsText: 'Name', value: SelectedAilment"></select></td>
    </tr>
</script>

В шаблоне HTML мне нужно привязать AilmentsType к одному из столбцов какпадать.Кто-нибудь может подсказать мне, как этого добиться?Спасибо.

Answer 1

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

Если вы используете бета-версию 1.3затем вы можете использовать специальные переменные $root или $parent, которые предоставляет Knockout.В этом случае они будут одинаковыми, так как вы находитесь только на одном уровне от области верхнего уровня.Так что просто сделайте: $root.AilmentsType.

Если вы используете более раннюю версию, вы можете использовать функциональность templateOptions для передачи опций в шаблон jQuery.Это будет выглядеть так:

<tbody data-bind='template: { name: "ailmentRowTemplate", foreach: Ailments, templateOptions: { types: AilmentsType } }'>
</tbody>

Затем получите к нему доступ:

<select data-bind="options: $item.types,  optionsText: 'Name', value: SelectedAilment"></select>