在初始頁面加載後填充時出現綁定元素

Question

在linked JS Fiddle中，我有一個包含2個聯繫對象的列表，以及加載頁面時的空active_contact對象。當點擊聯繫人列表下方的「激活」鏈接時，我希望該聯繫人的屬性填充活動的聯繫人輸入字段。目前，我填充active_contact對象的函數正在觸發，並且該值按預期方式填充，但未顯示在頁面上（檢查元素時，輸入字段甚至未顯示在代碼中）。

值得一提的是這是我第一次使用Knockout，所以完全有可能我缺少一些非常基本的東西。

代碼：

HTML

var initialData = [ 
 
    { firstName: "Danny", lastName: "LaRusso", phones: [ 
 
     { type: "Mobile", number: "(555) 121-2121" }, 
 
     { type: "Home", number: "(555) 123-4567"}] 
 
    }, 
 
    { firstName: "Sensei", lastName: "Miyagi", phones: [ 
 
     { type: "Mobile", number: "(555) 444-2222" }, 
 
     { type: "Home", number: "(555) 999-1212"}] 
 
    } 
 
]; 
 
    
 
var ContactsModel = function(contacts) { 
 
    var self = this; 
 
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) { 
 
     return { firstName: contact.firstName, lastName: contact.lastName, phones: ko.observableArray(contact.phones) }; 
 
    })); 
 
    
 
    self.active_contact = ko.observable(); 
 
    
 
    self.makeActive = function(firstName){ 
 
     for(var i in self.contacts()){ 
 
\t \t \t if(self.contacts()[i].firstName == this.firstName){ 
 
       console.log(self.contacts()[i]); 
 
\t \t \t \t self.active_contact = self.contacts()[i]; 
 
\t \t \t } 
 
\t \t } 
 
    } 
 
    
 
}; 
 
    
 
ko.applyBindings(new ContactsModel(initialData));

 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div class='liveExample'> 
 
    <h2>Contacts</h2> 
 
    <div id='contactsList'> 
 
     <h3>active contact: </h3> 
 
     <div class="active" data-bind="with: active_contact"> 
 
      <input type="text" data-bind="value: firstName" /> 
 
      <input type="text" data-bind="value: lastName" /> 
 
     </div> 
 
     <table class='contactsEditor'> 
 
      <tr> 
 
       <th>First name</th> 
 
       <th>Last name</th> 
 
       <th>Phone numbers</th> 
 
      </tr> 
 
      <tbody data-bind="foreach: contacts"> 
 
       <tr> 
 
        <td> 
 
         <input data-bind='value: firstName' /> 
 
         <div><a href='#' data-bind='click: $root.makeActive'>Make Active</a></div> 
 
        </td> 
 
        <td><input data-bind='value: lastName' /></td> 
 
        <td> 
 
         <table> 
 
          <tbody data-bind="foreach: phones"> 
 
           <tr> 
 
            <td><input data-bind='value: type' /></td> 
 
            <td><input data-bind='value: number' /></td> 
 
           </tr> 
 
          </tbody> 
 
         </table> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

Answer 1

有在self.makeActive兩個問題：

.makeActive沒有收到firstname，果然收到全contact對象 - 所以整個for循環是沒有必要的，因爲你已經有你在找什麼。

主要的問題是在這條線：

self.active_contact = self.contacts()[i]; 

你是不是分配一個新的價值，可觀察到的，但實際上卻是更換可觀察的本身。這就是爲什麼你的標記不再更新 - 它最初綁定的可見性現在已經消失了。

試試這個：

self.makeActive = function (contact) { 
    self.active_contact(contact); 
}; 

Answer 2

試試這個：http://jsfiddle.net/dsqo3mnw/

首先，我改變了這一點：

self.active_contact = self.contacts()[i]; 

這樣：

var activeContact = self.contacts()[i]; 
self.active_contact(activeContact.firstName + " " + activeContact.lastName); 

我是新來的淘汰賽爲好，但這是我的理解：active_contact不是字符串對象;這是一個可觀察的功能。要更改其值，必須調用該函數並傳入新值。

其次，我改變了從這個數據綁定：

<div class="active" data-bind="with: active_contact"> 
    <div data-bind="text: firstName"></div> 
</div> 

這樣：

<p style="font-weight: bold"> 
    Modified Active Contact Binding: 
    <span data-bind="text: active_contact"></span> 
</p> 

我不熟悉的with結合呢，但text結合應該滿足您的需求很好，不是嗎？