KnockoutJs SELECT標記未定義

我遇到了模型的部分下拉列表未正確綁定的問題。我不確定我做錯了什麼。我有一個簡單的示例，綁定很好。但在完整版本中，下拉列表只是表示「未定義」。KnockoutJs SELECT標記未定義

該模型適用於「員工」，並具有一組「聯繫人」的關聯模型。相關位是這樣的：

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>

沒有區別。仍然說未定義。

我錯過了什麼？

來源

2013-07-31 Clever Human

您是否正在使用其他可以自定義您的'select'元素的插件/框架？ – nemesv

也許就是這樣。我正在使用Zurb基金會（http://foundation.zurb.com/）。 –

由於nemesv，得到的答覆是「沒有定製」類添加到選擇元素：

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

添加Zurb基金會標籤這一職務。

來源

2013-07-31 19:59:41

KnockoutJs SELECT標記未定義

回答

相關問題