이미지를 클릭하면 knockoutJS의 값이 증가합니다.

Question

다음은 HTML 및 JS 코드

HTML 본문입니다.

<h2 data-bind="text: currentCat().name" id="cat-name"></h2> 
    <div data-bind="text: currentCat().clickCount" id="cat-count"></div> 
    <img src="" data-bind="click: incrementCount(), attr: {src: currentCat().imgSrc}" id="cat-img" alt="cute cat"> 
    <h4>NickNames</h4> 
    <ul data-bind="foreach: currentCat().nickNames"> 
     <li data-bind="text: name"></li> 
    </ul> 
</div> 
<script src="js/lib/knockout-3.2.0.js"></script> 
<script src="js/app.js"></script> 

JS 코드

var ViewModel = function() { 
    this.currentCat = ko.observable(new Cat()); 
    console.log(this.currentCat().clickCount()) 
    this.incrementCount = function(){ 


this.currentCat().clickCount(this.currentCat().clickCount() + 1); 
    }; 
} 

var Cat = function() { 
    this.clickCount = ko.observable(0); 
    this.name = ko.observable('Tabby'); 
    this.imgSrc = ko.observable('tabby.jpg'); 
    this.imgAttribution = ko.observable('XXXX'); 

    this.nickNames = ko.observableArray(
     [ 
      {name: 'Tabtab'}, 
      {name: 'T-bone'}, 
      {name: 'Mr. T'}, 
      {name: 'Tabitha Tab Tabby'} 
     ] 
    ); 
} 
ko.applyBindings(new ViewModel()) 

그러나, HTML 페이지를 렌더링에, 클릭 수 대신 기대 값 0의 1이 내가 뭔가를 놓친 건가입니까?

Answer 1

click binding은 표현식이 아닌 함수 참조를 필요로합니다. 제공 한 표현식은 바인딩이 초기화 될 때 즉시 실행됩니다. 함수 자체를 제공하기 위해 바인딩을 변경해야합니다.

data-bind="click: incrementCount"