在初始页面加载后填充时出现绑定元素

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结合应该满足您的需求很好，不是吗？