2013-04-16 49 views
5

Hãy xem HTML mẫu sau. Nó là một ràng buộc KO foreach đơn giản và một nút để thêm một mục mới vào observableArray. Việc bổ sung hoạt động tốt và mục mới xuất hiện. Tuy nhiên, phương thức afterRender không bao giờ được gọi - không phải sau ràng buộc ban đầu và không phải sau khi một mục mới được thêm vào (và được hiển thị). Tại sao?Tại sao afterRender không bao giờ gọi?

Fiddle:http://jsfiddle.net/CQNm6

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script> 
    </head> 
    <body> 
     <div data-bind="foreach: data.things, afterRender: afterRenderTest"> 
      <h1 data-bind="text: name"></h1> 
     </div> 
     <a href="JavaScript:void(0);" onclick="data.things.push({ name: ko.observable('New Thing') });">Add New Thing</a> 

     <script type="text/javascript"> 
      var Thing = (function() 
      { 
       function Thing(p_name) 
       { 
        this.name = ko.observable(p_name); 
       } 

       return Thing; 
      })(); 
      var data = 
      { 
       things: ko.observableArray(
       [ 
        new Thing("Thing One"), 
        new Thing("Thing Two"), 
        new Thing("Thing Three") 
       ]) 
      }; 

      function afterRenderTest(elements) 
      { 
       alert("Rendered " + elements.length + " elements."); 
      } 

      ko.applyBindings(); 
     </script> 
    </body> 
</html> 

Trả lời

12

cú pháp của bạn là sai vì foreach ràng buộc hoặc mất một mảng hoặc một đối tượng mà bạn chỉ định các sự kiện bổ sung, lập luận.

Từ documentaiton:

Vượt qua mảng mà bạn muốn để lặp qua. Việc ràng buộc sẽ xuất ra một phần đánh dấu cho mỗi mục nhập.

Cách khác, chuyển đối tượng JavaScript theo nghĩa đen với thuộc tính được gọi là data là mảng bạn muốn lặp lại. Đối tượng đen cũng có thể có các tính chất khác, chẳng hạn như afterAdd hoặc includeDestroyed ...

Vì vậy, bạn cần phải ghi:

<div data-bind="foreach: { data: data.things, afterRender: afterRenderTest }"> 
    <h1 data-bind="text: name"></h1> 
</div> 

Demo JSFiddle.

+0

Silly tôi, cảm ơn! –

Các vấn đề liên quan