StrugglingCoder StrugglingCoder - 6 months ago 20
Javascript Question

Knockout JS object prototype issue

It's not a bug but I can't figure out what's happening.

I want to display a certain set of friends at the page load. And then when the

Add Friend
button is clicked ,

it should add new friends named
. That's happening.

But I can't figure out why it lists a friend named
at the load also.

here is the code snippet.


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

<ul data-bind="foreach:friends">
<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>

<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() {

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

The output at the page load looks like

enter image description here

should only be added when the
Add Freind
button is clicked. What am I doing wrong ?


The issue is in your data binding. When knockout comes across this during the data-binding step:

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

It will run it immediately and assign the result of the function to the click event handler. If you need to pass parameters to a bound function in this way, you need to wrap it in another function:

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

This anonymous function is then bound to the click event, and addFriend won't be called until you actually click the button.