업데이트 이벤트는

Question

를이 내 html로되어 트리거하지 바인딩 강력한 프레임 워크. 하지만 난 내 자신의 코드에서 작동하지 못하게했기 때문에 knockoutjs 사용자 정의 바인딩이 작동하는 방법을 이해하는 데 몇 가지 장애물이 있습니다.

이

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 is " + valueUnwrapped.firstname() + "</span><br/>"; 
      html += "<span id=\"lastname\">Lastname is " + valueUnwrapped.lastname() + "</span><br/>"; 
      html += "<span id=\"age\">Age is " + 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); 
    }); 

내 질문은 :

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

이 내 자바 스크립트입니다 : 내 html 파일에

이 내 코드 : 그래서 사실은 내가 아래의 코드처럼 내 자신에 대한 몇 가지 작은 실험을했다 : 왜 버튼을 클릭하면 knockoutjs bindingHandler에서 업데이트 이벤트가 트리거되지 않습니다. 내가 뭘 잘못 했니?

Answer 1

model.change 함수가 ko observables 작업에 올바른 구문을 사용하지 않아서 사용자 지정 처리기가 실행되지 않는다고 생각합니다. 값을 가져 오거나 설정할 때 ()을 사용해야합니다.

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

맞춤 바인딩 처리기를 모두 사용하지 못할 수도 있습니다. 아래 코드 (사용자 지정 처리기 없음)를 사용하여 동일한 기능을 수행 할 수 있습니다. 바이올린 here

HTML 작업

<div data-bind="with: student"> 
    Firstname is <span id="firstname" data-bind="text: firstname"></span><br /> 
    Lastname is <span id="lastname" data-bind="text: lastname"></span><br /> 
    Age is <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);