javascript - Knockout JS对象原型(prototype)问题

Question

这不是一个错误，但我不知道发生了什么。

我想在页面加载时显示一组特定的 friend 。然后当点击添加 friend 按钮时，

它应该添加名为 SpaceX 的新 friend 。事情正在发生。

但我不明白为什么它也在加载时列出了一个名为 SpaceX 的 friend 。

这是代码片段。

查看 HTML

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<ul data-bind="foreach:friends">
    <li>
        <strong data-bind="text: friendName"></strong>
        <input type="checkbox" data-bind="checked: knowJS" />
        <input data-bind="value: favLib,visible: knowJS" />
        <button data-bind="click: removeFriend">X</button>
    </li>
</ul>

<button data-bind="click: addFriend('SpaceX')">Add Friend</button>

ViewModel - JavaScript

//Create a sample JS Class
function Friend(name) {
    this.friendName = name;
    this.knowJS = ko.observable(false);
    this.favLib = ko.observable('');
    this.removeFriend = function() {
        obj.friends.remove(this);
    };
};

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI

//Create an object type using constructor function
function AppViewModel(){
    this.friends = ko.observableArray([new Friend("Chiranjib"), new Friend("Nandy")]);
};

//Add a property to the prototype of the object type
AppViewModel.prototype.addFriend= function(fname){
    this.friends.push(new Friend(fname));
};

//Create a specific object out of the object type defined
var obj = new AppViewModel();

// Activates knockout.js
ko.applyBindings(obj);

页面加载时的输出如下所示

但是SpaceX只能在点击Add Freind按钮时添加。我做错了什么？

Answer 1

问题出在您的数据绑定(bind)中。当 knockout 在数据绑定(bind)步骤中遇到此问题时:

data-bind="click: addFriend('SpaceX')"

它将立即运行它，并将函数的结果分配给click事件处理程序。如果需要以这种方式向绑定(bind)函数传递参数，则需要将其包装在另一个函数中:

data-bind="click: function() { addFriend('SpaceX'); }"

此匿名函数随后会绑定(bind)到 click 事件，并且在您实际单击该按钮之前不会调用 addFriend。