Knockout afterRender, nhưng chỉ một lần

Question

Tôi có một observableArray đơn giản chứa rất nhiều mô hình người dùng. Trong đánh dấu, có một mẫu với vòng lặp foreach vòng lặp người dùng và xuất chúng trong một bảng đơn giản. Tôi bổ sung phong cách bảng với một thanh cuộn tùy chỉnh và một số javascript khác. Vì vậy, bây giờ tôi phải biết khi vòng lặp foreach kết thúc và tất cả các mô hình được thêm vào DOM.

Sự cố với cuộc gọi lại sau cuộc gọi là nó được gọi mỗi khi có gì đó được thêm vào, nhưng tôi cần kiểu gọi lại chỉ kích hoạt một lần.

Answer 1

đặt cược tốt nhất của bạn này là sử dụng một tùy chỉnh ràng buộc. Bạn có thể đặt liên kết tùy chỉnh của mình sau foreach trong danh sách các liên kết trong số data-bind hoặc bạn có thể thực thi mã của mình trong một setTimeout để cho phép foreach tạo nội dung trước khi mã của bạn được thực thi.

Đây là một mẫu cho thấy chạy mã một lần duy nhất và chạy mã mỗi khi cập nhật observableArray của bạn: http://jsfiddle.net/rniemeyer/Ampng/

HTML:

<table data-bind="foreach: items, updateTableOnce: true"> 
    <tr> 
     <td data-bind="text: id"></td> 
     <td data-bind="text: name"></td> 
    </tr> 
</table> 

<hr/> 

<table data-bind="foreach: items, updateTableEachTimeItChanges: true"> 
    <tr> 
     <td data-bind="text: id"></td> 
     <td data-bind="text: name"></td> 
    </tr> 
</table> 

<button data-bind="click: addItem">Add Item</button> 

JS:

var getRandomColor = function() { 
    return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
}; 

ko.bindingHandlers.updateTableOnce = { 
    init: function(element) { 
     $(element).css("color", getRandomColor());    
    }  
}; 

//this binding currently takes advantage of the fact that all bindings in a data-bind will be triggered together, so it can use the "foreach" dependencies 
ko.bindingHandlers.updateTableEachTimeItChanges = { 
    update: function(element) {  
     $(element).css("color", getRandomColor()); 
    }  
}; 


var viewModel = { 
    items: ko.observableArray([ 
     { id: 1, name: "one" }, 
     { id: 1, name: "one" }, 
     { id: 1, name: "one" } 
    ]), 
    addItem: function() { 
     this.items.push({ id: 0, name: "new" }); 
    } 
}; 

ko.applyBindings(viewModel); 

Answer 2

Chỉ cần ra khỏi đỉnh đầu của tôi bạn có thể một trong hai:

• Thay vì hooking vào sự kiện afterRender, chỉ cần gọi hàm của bạn sau khi bạn có push/popped một mục trên mảng.
• Hoặc có thể bọc ObservableArray trong một quan sát mà bản thân nó có các mục con bên dưới với sự kiện afterRender của riêng nó. Vòng lặp foreach sẽ cần phải tham khảo các mẹ quan sát được như vậy:

Ví dụ:

<div> 
    <div data-bind="with: parentItem(), template: { afterRender: myRenderFunc }" > 
     <div data-bind="foreach: observableArrayItems"> 
      ... 
     </div> 
    </div> 
    </div> 

Không thử nghiệm vì vậy chỉ cần đoán ...

Answer 3

Một cách nhanh chóng và cách đơn giản là, trong trình xử lý afterRender của bạn, hãy so sánh mục hiện tại với mục cuối cùng trong danh sách của bạn. Nếu nó khớp, thì đây là lần cuối cùng afterRender được chạy.

Answer 4

Để tìm hiểu khi mẫu foreach đã hoàn thành hiển thị, bạn có thể tạo liên kết "giả" và chuyển chỉ mục mục được hiển thị hiện tại cho trình xử lý của bạn và kiểm tra xem nó có phù hợp với độ dài mảng hay không.

HTML:

<ul data-bind="foreach: list"> 
    <li> 
    \\ <!-- Your foreach template here --> 
    <div data-bind="if: $root.listLoaded($index())"></div> 
    </li> 
</ul> 

ViewModel - Handler:

this.listLoaded = function(index){ 
    if(index === list().length - 1) 
     console.log("this is the last item"); 
} 

Giữ thêm cờ nếu bạn có ý định thêm các mục vào danh sách.

Answer 5

Tôi đã nghĩ ra một trò gian lận thanh lịch.Ngay sau khi khối template/foreach của bạn, thêm mã này:

<!--ko foreach: { data: ['1'], afterRender: YourAfterRenderFunction } --> 
<!--/ko--> 

Answer 6

Tôi không chắc chắn nếu câu trả lời chấp nhận sẽ làm việc trong knock-out-3.x (như dữ liệu ràng buộc không còn được chạy theo thứ tự bạn khai báo).

Đây là một tùy chọn khác, nó sẽ chỉ kích hoạt chính xác một lần.

ko.bindingHandlers.mybinding { 
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
      var foreach = allBindings().foreach, 
       subscription = foreach.subscribe(function (newValue) { 
       // do something here 
       subscription.dispose(); // dispose it if you want this to happen exactly once and never again. 
      }); 
     } 
} 

Answer 7

Làm thế nào để sử dụng trình gỡ lỗi?

var afterRender = _.debounce(function(){  

    // code that should only fire 50ms after all the calls to it have stopped 

}, 50, { leading: false, trailing: true}) 

Answer 8

Câu trả lời của Jaffa có lỗi nên tôi quyết định tạo câu trả lời mới thay vì nhận xét. Không thể sử dụng cùng với và mẫu cùng một lúc. Vì vậy, chỉ di chuyển mô hình của bạn vào mẫu của data thẻ

Html

<div data-bind="template: {data: myModel, afterRender: onAfterRenderFunc }" > 
    <div data-bind="foreach: observableArrayItems"> 
     ... 
    </div> 
</div> 

Javascript

var myModel = {  
    observableArrayItems : ko.observableArray(), 

    onAfterRenderFunc: function(){ 
    console.log('onAfterRenderFunc') 
    } 

} 
ko.applyBinding(myModel);