CODEWITHSUNDEEP
jqueryknockout.js
Joey Estrada
Joey Estrada

Reputation: 404

KnockoutJs - data-bind not working on new element

Im done on binding and it works great. Now im trying to create a element create via jquery. my problem is when I created a new element using jquery with a data-bind it doesnt interact with knockout. Please help me :( I think this should be rebind .....

when I click the add button created by jquery it doesnt work :(

This is my Code: HTML

User List:<br>
<table>
    <thead><tr>
    <th>name</th><th>action</th>
</tr></thead>
<tbody class="user-list">
    <tr>
        <td>anthony</td>
        <td><input type="button" data-bind="click: addUser" value="add"/></td>
    </tr>    
</tbody>
</table>

<input type="button" class="btnAdd"  value="add User"/>
User to Block:<br>
<table>
        <thead><tr>
        <th>Username</th>
     </tr></thead>
    <tbody data-bind="foreach: users">
        <tr>
            <td><input data-bind="value: name" /></td>     
       </tr>    
   </tbody>
</table>

My Js:

$(".btnAdd").bind('click',function(){
$('.user-list').append('<tr><td>joey</td> <td><input type="button" data-bind="click: addUser" value="Add"/></td></tr> ');});

function UserList(name) {
    var self = this;
    self.name = name;  
}

function UserViewModel() {
    var self = this;

    self.users = ko.observableArray();

    self.addUser = function() {
    self.users.push(new UserList("it works"));
}

}
ko.applyBindings(new UserViewModel());

Thanks on advance!

Upvotes: 2

Views: 10963

Answers (3)

Arun Aravind
Arun Aravind

Reputation: 1318

Do ko.applyBindingsToNode on your new element

Upvotes: 0

Xiaodoudou
Xiaodoudou

Reputation: 326

Regarding what you trying to do I have made a jsfiddle to show you how:

http://jsfiddle.net/Maw8K/4/

I would like to explain you that line :

ko.applyBindings(new UserViewModel());

By writing that line, you ask knockout to apply the binding, you could call it back each time that you add new DOM element, but it will failed as it will try to reapply some existing binding.

Because of that last thing, you must pass the DOM as the second argument to delimit on which DOM it need to analyse and apply the bindings.

Another part of your issue is your model. As you write your model, you must share it; otherwise your list will be unique to each binding.

For that you can do like that:

function UserList(name) {
    var self = this;
    self.name = name;  
}

function UserViewModel() {
    var self = this;

    self.users = ko.observableArray();

    self.addUser = function() {
    self.users.push(new UserList("it works"));
}

}

//We are sharing the model to get a common list
var userViewModel = new UserViewModel();
//We inform knockout to apply the bindings
ko.applyBindings(userViewModel);

//On click on btnAdd
$(".btnAdd").bind('click',function(){
  //We define the new element
  var newElement = $('<tr><td>joey</td> <td><input type="button" data-bind="click: addUser" value="Add"/></td></tr>');
  //We append it
  $('.user-list').append(newElement);
  //We inform knockout to apply the binding only on the new element
  //The second param must be DOM and not JQuery so that why you have to use [0]
  ko.applyBindings(userViewModel, newElement[0]);
});

Upvotes: 7

PW Kad
PW Kad

Reputation: 14995

'Sorry to be the bearer of bad news, but you are using Knockout.js now, and jQuery should be a thing you remember from the past but use only when you need to. Forget about that DOM manipulation and look forward to two-way data-binding.

Your addUser method on the view model is never called because you aren't binding to it. Look at the Knockout tutorials for a better understanding of how to use them.

<input type="button" class="btnAdd" data-bind="click: addUser"/>

self.addUser = function() {
    alert('OMGooses!');
    self.users.push(new UserList("it works"));
};

Whenever you are trying to use a binding handler use data-bind="" attribute not your own thing. You can use a containerless binding also, but look up in the docs how to do that.

Upvotes: 0

Related Questions