Knockout.js绑定到下拉列表

问题描述

尝试将数据绑定到下拉列表，

Trying to bind data to a dropdown list,

    function EmailTemplate(data) {
        var self = this;
        self.etId = ko.observable(data.email_template_id);
        self.etTypeId = ko.observable(data.email_template_type_id);
        self.etTitle = ko.observable(data.email_template_title);
        self.etContent = ko.observable(data.email_template_content);
        self.etAppYear = ko.observable(data.app_year);
        self.etSubject = ko.observable(data.subject);
        self.etActive = ko.observable(data.active);
    }

    function EmailTemplateViewModel() {
        var self = this;
        self.ETList = ko.observableArray();

        var uri = '/admin/services/EmailTemplateService.svc/EmailTemplates';
        OData.read(uri, function (data, response) {
            $.each(data.results, function (index, item) {
                self.ETList.push(new EmailTemplate(item));
            });
        });
    }
    $(document).ready(function () {
        ko.applyBindings(new EmailTemplateViewModel());
    });

HTML标记:

 <select data-bind="options: ETList, value:etId, optionsText: 'etTitle' "class="dropdown"></select>

当我运行它时，我得到:未捕获的错误:无法解析绑定.消息:ReferenceError:etIdis未定义；绑定值:选项:ETList，值:etId，optionsText:'etTitle'

When I run this I got:Uncaught Error: Unable to parse bindings.Message: ReferenceError: etIdis not defined;Bindings value: options: ETList, value:etId, optionsText: 'etTitle'

当我们绑定到下拉列表时，我们应该如何绑定该值?绑定后，我们应该如何在Knockout中捕获或创建下拉更改事件?

When we bind to drop down list, how should we bind the value? and after binding, how should we capture or create dropdown change event in Knockout?

推荐答案

使用<select>选项时，value绑定将确定选择了哪个选项，通常您会希望在视图模型中观察到一个(例如selectedTemplate).然后，该可观察对象将自动从可观察数组映射到实际对象.设置value: etId没有意义，因为您的根视图模型中没有etId.

When working with <select> options, the value binding will determine which of the options is selected, usually you'll want an observable in your viewmodel (e.g. selectedTemplate) that this is set to. Then this observable will automatically be mapped to the actual object from the observable array. Setting value: etId doesn't make sense since there's no etId in your root viewmodel.

示例: http://jsfiddle.net/antishok/968Gy/

function EmailTemplateViewModel() {
    var self = this;
    self.ETList = ko.observableArray();
    self.selectedTemplate = ko.observable();
    // ...
}

HTML:

<select data-bind="options: ETList, value:selectedTemplate, optionsText: 'etTitle'" class="dropdown"></select>

您可能打算使用optionsValue: 'etId'，它会起作用，但通常不是首选的方法(因为现在将observable的值设置为ID而不是实际对象)

You might have intended to to optionsValue: 'etId' which would work but is usually a less preferable approach (because the observable's value would now be set to the ID instead of the actual object)

这篇关于Knockout.js绑定到下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！