Question

在linked JS Fiddle中，我有一个包含2个联系人对象的列表，以及页面加载时的null active_contact对象。点击＆＃34; Make Active＆＃34;联系人列表下的链接，我希望该联系人的属性填充活动的联系人输入字段。目前，我填充active_contact对象的函数正在触发，并且该值按预期填充，但它没有显示在页面上（检查元素时，输入字段甚至没有显示在代码中）。

值得一提的是这是我第一次使用Knockout，所以我完全有可能错过一些非常基本的东西。

代码：

HTML

＆＃13;

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()){
			if(self.contacts()[i].firstName == this.firstName){
                console.log(self.contacts()[i]);
				 self.active_contact = self.contacts()[i];
			}
		}
    }
 
};
 
ko.applyBindings(new ContactsModel(initialData));

＆＃13;

 

   <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>

＆＃13;

Answer 1

试试这个：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绑定应该适合您的需求，不行吗？

Answer 2

self.makeActive中存在两个问题：

.makeActive没有收到firstname，它确实收到了完整的contact对象 - 所以整个for循环都没有必要，因为你已经拥有了寻找。

主要问题在于这一行：

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

您没有为observable分配新值，但实际上是替换 observable本身。这就是为什么你的标记不再更新 - 它最初被绑定的可观察现在已经消失了。

请改为尝试：

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

在初始页面加载后填充时显示绑定元素

2 个答案: