Run JS sau khi render một thiên thạch mẫu

Question

Tôi có một mẫu mà trông giống như sau:

<template name="foo"> 
    <textarea name="text">{{contents}}</textarea> 
</template> 

tôi làm cho nó với:

Template.foo = function() { 
    return Foos.find(); 
} 

Và tôi có một số xử lý sự kiện:

Template.foo.events = { 
    'blur textarea': blurHandler 
} 

Điều tôi muốn làm là đặt thuộc tính rows của textarea tùy thuộc vào kích thước nội dung của nó. Tôi nhận ra rằng tôi có thể viết một trình trợ giúp Handlebars, nhưng nó sẽ không có quyền truy cập vào phần tử DOM được hiển thị, điều này sẽ buộc tôi phải thực hiện một số bản sao không cần thiết. Những gì tôi muốn, lý tưởng, là cho sao băng để kích hoạt một sự kiện sau khi một phần tử được hiển thị. Một cái gì đó như:

Template.foo.events = { 
    'render textarea': sizeTextarea 
} 

Điều này có thể?

Answer 1

Tôi nghĩ cách 'tốt nhất' hiện tại để thực hiện việc này (đó là một chút hack) là sử dụng Meteor.defer ala Callback after the DOM was updated in Meteor.js.

Geoff là một trong những nhà phát triển thiên thạch, vì vậy lời của Ngài là Tin Lành :)

Vì vậy, trong trường hợp của bạn, bạn có thể làm một cái gì đó như:

<textarea id="{{attach_textarea}}">....</textarea> 

và

Template.foo.attach_textarea = function() { 
    if (!this.uuid) this.uuid = Meteor.uuid(); 

    Meteor.defer(function() { 
    $('#' + this.uuid).whatever(); 
    }); 

    return this.uuid; 
} 

EDIT

Lưu ý, đó là 0.4.0, bạn có thể làm này một cách nhiều ad-hoc (như được chỉ ra bởi Sander):

Template.foo.rendered = function() { 
    $(this.find('textarea')).whatever(); 
} 

Answer 2

Vâng tôi nghĩ vậy - không chắc chắn nếu đó là "đúng cách", nhưng hoạt động này đối với tôi:

Trong ứng dụng của bạn JS, phần client sẽ chạy bất cứ điều gì javascript có trên máy khách. Ví dụ:

if (Meteor.is_client) { 
    $(function() { 
     $('textarea').attr('rows' , 12) // or whatever you need to do 
    }) 
    ... 

Lưu ý ví dụ tại đây sử dụng JQuery, trong trường hợp này bạn cần cung cấp cho khách hàng (tôi nghĩ :-). Trong trường hợp của tôi:

Tôi đã tạo thư mục/máy khách và thêm tệp jquery.js vào phần này.

Hy vọng điều này sẽ hữu ích.

Answer 3

Tính đến Meteor 0.4.0 nó có thể kiểm tra xem một mẫu đã kết thúc hiển thị, xem http://docs.meteor.com/#template_rendered

Nếu tôi hiểu câu hỏi của bạn một cách chính xác, bạn nên gói mã thay đổi kích thước textarea của bạn bên trong một hàm Template.foo.onRendered:

Template.foo.onRendered(function() { 
    this.attach_textarea(); 
}) 

Answer 4

Kể từ khoảng tháng 6 năm 2014, cách chính xác để làm điều này đã được để thiết lập một callback sử dụng Template.myTemplate.onRendered().