Question

我遇到的问题是部分模型的下拉列表没有正确绑定。我不确定我做错了什么。我有一个简单的样本，绑定得很好。但在完整版中，下拉列表只是显示“未定义”。

该模型适用于“员工”，并具有一组“联系人”的关联模型。相关位看起来像这样：

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（）是一个数组[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>

没有区别。仍然说Undefined。

我错过了什么？

Answer 1

感谢nemesv，答案是在select元素中添加“no-custom”类：

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

将Zurb Foundation标记添加到此帖子中。

KnockoutJs SELECT标签是Undefined

1 个答案: