javascript - Knockout click data binding -

i have issue in below example

html code:

 <table id="items">     <thead>         <tr>             <td>todo list</td>         </tr>     </thead>     <tbody data-bind="foreach: todoitems">         <tr>             <td><label data-bind="text: todoitem"></label></td>             <td><a href="#" data-bind="click: $root.removetodoitem">remove</a></td>         </tr>     </tbody> </table> add item: <input type="text" id="newitem" /> <button data-bind="click: addnewitem">add</button> 

this js code:

$(function () {    var metalviewmodel = function() {     var self = this;     self.todoitems = ko.observablearray();      self.update = function() {         self.todoitems.removeall();         self.todoitems.push(             new metals({"task":"this urgent task."}),             new metals({"task":"you need also."})         );     }     self.addnewitem = function () {         alert( $("#newitem").val() );         self.todoitems.push(             new metals({"task":$("#newitem").val()})         );     };     self.removetodoitem = function(item) {         self.todoitems.remove(item);     };    };  var metalviewmodel = new metalviewmodel(); var y = window.setinterval(metalviewmodel.update,1000); ko.applybindings(metalviewmodel, document.getelementbyid("items"));  }); var metals = function (data) {     return {         todoitem: ko.observable(data.task)     }; }; 

everything working fine. listing, removing ....

issue facing when add new item, function totally not working... means if alert click binding not reach there.

you bound table vewmodel (id=items):

 ko.applybindings(metalviewmodel, document.getelementbyid("items")); 

and button outside table not related viewmodel.

as solution, can bind common parent or whole page:

 ko.applybindings(metalviewmodel);