Проблема с прототипом нокаута JS

Question

Это не ошибка, но я не могу понять, что происходит.

Я хочу отобразить определенный набор друзей при загрузке страницы. И затем, когда нажата кнопка Add Friend,

должно добавить новых друзей по имени SpaceX. Это происходит.

Но я не могу понять, почему в нем также указан друг с именем SpaceX.

вот фрагмент кода.

просмотр 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

Проблема заключается в привязке данных. Когда Нокаут приходит через это во время операции связывания данных:

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

Он будет работать он сразу и присвоить результат функции в обработчик события click. Если вам нужно передать параметры связанной функции таким образом, что вам нужно обернуть его в другой функции:

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

Эта анонимная функция затем связывается с click события и addFriend не будет называться, пока вы на самом деле нажмите кнопку.