Knockout：访问 HTML 模板中的 viewmodel 实例

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 就绪块中创建的，因此您无法在数据绑定中直接访问它。

如果您使用的是 1.3 beta，则可以使用 Knockout 提供的 $root 或 $parent 特殊变量。在这种情况下，它们将是相同的，因为您仅距顶级范围一层。因此，只需执行：$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>