2

データをドロップダウン リストにバインドしようとしています。

    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: Unable to parse bindings. メッセージ: ReferenceError: etIdis が定義されていません。バインディング値: オプション: ETList、値:etId、optionsText: 'etTitle'

ドロップダウン リストにバインドする場合、値をどのようにバインドすればよいでしょうか。バインド後、ノックアウトでドロップダウン変更イベントをどのようにキャプチャまたは作成する必要がありますか?

4

1 に答える 1

3

<select>オプションを操作する場合、バインディングはどのオプションが選択されているかを決定します。通常は、これが設定されているvalueビューモデル (例: ) でオブザーバブルが必要になります。selectedTemplate次に、このオブザーバブルは、オブザーバブル配列から実際のオブジェクトに自動的にマップされます。ルートビューモデルにないため、設定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'、通常はあまり好ましくないアプローチです (オブザーバブルの値が実際のオブジェクトではなく ID に設定されるため)。

于 2013-04-05T04:29:55.143 に答える