Knockout.js 绑定(bind)到下拉列表

Question

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

    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>

当我运行它时，我得到:
Uncaught Error :无法解析绑定(bind)。
消息:ReferenceError:etIdis 未定义；
绑定(bind)值:选项:ETList，值:etId，optionsText:'etTitle'

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

Answer 1

使用 <select> 时选项，value binding 将决定选择哪个选项，通常您需要在 viewmodel 中设置一个 observable(例如 selectedTemplate )。然后这个 observable 将自动映射到 observable 数组中的实际对象。设置value: etId没有意义，因为没有 etId在您的 Root View 模型中。

例子:
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 而不是实际对象)