2015-02-19 14 views
6

Tôi có một mẫu sao băng vẽ một số html mà tôi cần để thực hiện một chức năng jquery trên. Ngay bây giờ, tôi đã thiết lập một sự phụ thuộc để mỗi khi dữ liệu (một danh sách các đối tượng) gắn với các thay đổi khuôn mẫu đó, hàm sẽ chạy. Tôi không chắc chắn đây là cách tốt nhất để làm những gì tôi đang cố gắng để làm, nhưng nó chạy chức năng mỗi khi tôi thêm/xóa/sắp xếp lại các đối tượng, do đó, đó là một sự khởi đầu.Chạy một hàm SAU một mẫu sao băng được cập nhật

Tuy nhiên, chức năng dường như đang chạy trước khi mẫu được hiển thị lại, do đó, tập hợp các khối trước đó nhận được jquery-fied, nhưng bất kỳ khối nào tôi vừa thêm vào hành động đó thì không.

Có cách nào để buộc một hàm chạy SAU khi mẫu được hiển thị/cập nhật không? Bất kỳ sự giúp đỡ nào cũng được đánh giá cao!

(câu hỏi tương tự ở đây - Meteor reactive jquery - nhưng nó không có bất cứ câu trả lời)

Dưới đây là một số bit đang có lẽ có liên quan:

Template.showPictures.rendered = 
    Deps.autorun() -> 
     album = Albums.findOne(Session.get("selectedAlbum")) 

     if (album) 
     pictures = album.orderedPictures() 
     MyApp.loadJQuery() 

Template.showPictures.helpers 
    pics: -> 
    MyApp.myDependency.depend() 

    album = Albums.findOne(Session.get("selectedAlbum")) 
    album.orderedPictures() 

(Tại sao là autorun trong Template của tôi Điều đó dường như là một nơi tốt để đặt nó, nhưng đây là lần đầu tiên tôi thực sự đối phó với sự phụ thuộc, vì vậy tôi có thể hoàn toàn không có cơ sở ở đây. Bất kỳ ý tưởng nào về những gì đang xảy ra sẽ là tuyệt vời.)

Trả lời

5

Bạn có thể sử dụng Tracker.afterFlush cho rằng (và Tracker là một cái tên mới cho Deps):

Template.showPictures.rendered = 
    Tracker.autorun() -> 
     album = Albums.findOne(Session.get("selectedAlbum")) 

     if (album) 
     Tracker.afterFlush -> 
      // This will get executed when (among other things) 
      // the UI has been updated. 
      pictures = album.orderedPictures() 
      MyApp.loadJQuery() 

Tuy nhiên, cách Meteor là một cái gì đó như thế này:

<template name="things"> 
    {{#each things}} 
     {{> thing}} 
    {{/each}} 
</template> 

<template name="thing"> 
    <!-- Show the thing here... --> 
</template> 
Template.things.helpers({ 
    things: function(){ 
     return Things.find() 
    } 
}) 

Template.thing.rendered = function(){ 
    // This get executed each time a new thing is rendered! 
} 
+0

Nó hoạt động trong bạn sử dụng ReactiveVar. – SsouLlesS

1

Tôi đã tìm thấy điều gì đó hoạt động, nhưng nó vẫn có vẻ như là hacky ...

Điều tôi đã làm cuối cùng là đặt thời gian chờ. Vì vậy, bây giờ, thay vì mã ở trên, tôi có:

Template.sitePreview.rendered =() -> 
    Deps.autorun() -> 
    album = Albums.findOne(Session.get("selectedAlbum")) 

    if (album) 
     pictures = album.orderedPictures() 
     setTimeout MyApp.loadJQuery, 500 

Cho đến nay, đó là đủ thời gian cho mẫu hiển thị/cập nhật, vì vậy JQuery chạy trên tất cả các dữ liệu gần đây nhất. Vẫn hy vọng cho một giải pháp thanh lịch hơn, nhưng điều này sẽ làm!

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