knockout.js - Update Event on Custom Binding Not Triggered -

this html : hi, guys,

i new bie on knockoutjs world, feeling interested use in next project because seems powerfull framework. having obstacles understand on how knockoutjs custom binding works because fail make works on own codes. did small experiment on own codes below:

this code on html file:

<form id="form1" runat="server"> <div data-bind="schoolcalendar: student">         </div>     <br />     <input type="button" data-bind="click: change" value="click"/> </form> 

this javascript :

    var student = function (firstname, lastname, age) {         self = this;         self.firstname = ko.observable(firstname);         self.lastname = ko.observable(lastname);         self.age = ko.observable(age);     }      var model = function (student) {         self = this;         self.student = ko.observable(student);         self.change = function () {             self.student.firstname = "virna";             self.student.lastname = "patel";             self.student.age = 27;         };     }      ko.bindinghandlers.schoolcalendar = {         update: function (element, valueaccessor, allbindingsaccessor, viewmodel, context) {             var root = $(element);             var value = valueaccessor();             var valueunwrapped = ko.utils.unwrapobservable(value);             var allbindings = allbindingsaccessor();             var html = "<span id=\"firstname\">firstname " + valueunwrapped.firstname() + "</span><br/>";             html += "<span id=\"lastname\">lastname " + valueunwrapped.lastname() + "</span><br/>";             html += "<span id=\"age\">age " + valueunwrapped.age() + "</span><br/>";             root.append(html);              ko.applybindingstonode($("firstname").get(0), valueunwrapped.firstname());             ko.applybindingstonode($("lastname").get(0), valueunwrapped.lastname());             ko.applybindingstonode($("age").get(0), valueunwrapped.age());              return ko.bindinghandlers.value.init(element, valueaccessor, allbindingsaccessor, viewmodel, context);         }     };      $(document).ready(function () {         var m = new model(new student("john", "hadikusumo", 43));         ko.applybindings(m);     }); 

my question : why when click button, doesnt trigger update event on knockoutjs bindinghandler. did wrong ?

i think custom handler isn't firing because model.change function not using correct syntax working ko observables. need use () when getting or setting value.

self.change = function () {             self.student().firstname("virna");             self.student().lastname("patel");             self.student().age(27);         }; 

you may able away custom binding handler altogether though. can accomplish same functionality code below (no custom handler). working fiddle here

html

<div data-bind="with: student">     firstname <span id="firstname" data-bind="text: firstname"></span><br />     lastname <span id="lastname" data-bind="text: lastname"></span><br />     age <span id="age" data-bind="text: age"></span> </div>     <br />     <input type="button" data-bind="click: change" value="click"/> 

js

var student = function (firstname, lastname, age) {     self = this;     self.firstname = ko.observable(firstname);     self.lastname = ko.observable(lastname);     self.age = ko.observable(age); };  var model = function (std) {     self = this;     self.student = ko.observable(std);     self.change = function () {         self.student().firstname("virna");         self.student().lastname("patel");         self.student().age(27);     }; };  var m = new model(new student("john", "hadikusumo", 43)); ko.applybindings(m);