Knockout.js 绑定到下拉列表

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 未定义； 绑定值：options: ETList, value:etId, optionsText: 'etTitle'

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

Answer 1

使用<select> 选项时，value 绑定将确定选择哪个选项，通常您会希望在您的视图模型（例如selectedTemplate）中设置一个可观察的对象。然后这个 observable 将自动映射到 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 而不是实际对象）