Question

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

    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'

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

Answer 1

使用<select>选项时，value绑定将确定选择了哪个选项，通常您需要在视图模型中使用observable（例如selectedTemplate）调成。然后，这个observable将自动映射到可观察数组中的实际对象。设置value: etId没有意义，因为根视图模型中没有etId。

实施例： 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而不是实际对象）

Knockout.js绑定到下拉列表

1 个答案: