1

モデルの一部のドロップダウン リストが正しくバインドされないという問題があります。何が間違っているのかわかりません。問題なくバインドされている単純化されたサンプルがあります。しかし、完全版では、ドロップダウンリストには「未定義」とだけ表示されています。

このモデルは「従業員」用であり、「連絡先」の一連のモデルが関連付けられています。関連するビットは次のようになります。

var EmployeeViewModel = function() {
    var self = this;
    self.TypesOfContact = ko.observableArray(['Phone Number', 'Website', 'Messaging', 'Address', 'Email Address']);

    self.ContactDetails = ko.observableArray();
    self.ContactDetails().push(new ContactDetail(self.TypesOfContact()[0], 'Home Phone', '', '', '', '', '', '', ''));

    /* snip a bunch of other properties */

};

ContactDetail の関連ビットは次のようになります。

var ContactDetail = function(contactType, addressType, contactField, address1, address2, address3, city, state, postalCode) {
    var self = this;
    self.ContactType = ko.observable(contactType);
    /* snip a bunch of other properties */
};

関連する HTML のビットは次のようになります。

        <div class='row' data-bind="foreach: ContactDetails">
            <div class='small-3 columns '>
                <label>
                    Contact Type
                    <select id="ContactTypeSelect" data-bind='options: $root.TypesOfContact'>
                    </select>

                </label>
            </div>
            <div class='small-9 columns '>

            </div>
        </div>

他のプロパティは問題なくバインドされます。

私がこれを行う場合：

ko.applyBindings(new EmployeeViewModel());

そしてこれ：

var x = ko.contextFor(document.getElementById("ContactTypeSelect"));

次に、 x.$root.TypesOfContact() は、表示されると予想されるすべてのアイテムを含む Array[6] です。x.$data.ContactType() は「電話番号」です。

ただし、表示される HTML は「未定義」と表示されたドロップダウン ボックスであり、レンダリングされた HTML は次のようになります。

        <div class="small-3 columns ">
            <label>
                Contact Type
                    <select id="ContactTypeSelect" data-bind="options: $root.TypesOfContact" class="hidden-field" data-id="1375296525390-hq3U3">
                        <option value="Phone Number">Phone Number</option>
                        <option value="Website">Website</option>
                        <option value="Messaging">Messaging</option>
                        <option value="Address">Address</option>
                        <option value="Email Address">Email Address</option>
                        <option value="Phone Number">Phone Number</option>
                    </select><div class="custom dropdown" data-id="1375296525390-hq3U3"><a href="#" class="current">undefined</a><a href="#"
                        class="selector"></a><ul></ul>
                    </div>

            </label>
        </div>

元のマークアップを次のように変更すると:

<select id="ContactTypeSelect" data-bind='options: $root.TypesOfContact, value:ContactType'></select>

違いはありません。それでも未定義と言います。

私は何が欠けていますか？

4

1 に答える 1

1

nemesv のおかげで、答えは select 要素に「no-custom」クラスを追加することでした:

<select class="no-custom" id="ContactTypeSelect" data-bind='options: $root.TypesOfContact, value:ContactType'></select>

この投稿に Zurb Foundation タグを追加します。

于 2013-07-31T19:59:41.277 に答える