Question

我有一个viewmodel和一个相关的模板，如下所示。

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

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

1 个答案: