2013-09-24 41 views
13

Sử dụng EmberJS/Handlebars, làm cách nào để thêm lớp vào phần tử, chỉ khi điều kiện là đúng?Handlebars thuộc tính lớp có điều kiện

<div {{#if isSearching}}class="foo"{{/if}}></div> 

Như vậy, nhưng ít giả và thực tế hơn.

+0

Vâng, điều đó có hiệu quả. Bạn có thể gửi một danh sách lớp dưới dạng biến dữ liệu mẫu và sử dụng nó thay vì nếu bạn muốn xử lý những điều này bên ngoài khuôn mẫu. Hoặc bạn có thể sử dụng phương pháp trợ giúp tùy chỉnh ... Nhưng thực sự, những gì bạn có là cách đơn giản hơn. –

+0

@SimonBoudrias Nhưng nó không hoạt động. Nó thoát khỏi tất cả các thuộc tính sau câu lệnh if. – alt

Trả lời

5

Điều đó sẽ không hiệu quả vì trình trợ giúp {{#if}} sẽ tạo thẻ trong HTML của bạn. Làm điều này thay vì:

<div {{bind-attr class="isSearching:foo"}}></div> 
+1

bindAttr là cú pháp Ember "cũ" btw (không được sử dụng với các phiên bản mới hơn). –

+0

(nó được gọi là bind-attr trong cái mới) –

+0

Cảm ơn - Tôi đã cập nhật câu trả lời của tôi – chopper

9

Bạn phải sử dụng các {{bind-attr}} helper với một điều kiện boolean, bạn có thể read the guide about this.

Trong trường hợp của bạn, nếu tài sản isSearching là trong bộ điều khiển, bạn có thể chỉ cần làm như sau:

<div {{bind-attr class="isSearching:foo"}}></div> 

Bạn có thể xem toàn bộ mã trong fiddle này: http://jsfiddle.net/NQKvy/240/

+0

Liên kết của bạn đến hướng dẫn bị hỏng. – bmavity

46

{{bind- attr}} là deprecated. Bạn có thể sử dụng số mới đẹp hơn nhiều bound attribute syntax trong Ember 1.10 trở lên, như vậy:

<div class="{{if isSearching 'foo'}}"></div>  
+0

Đây là câu trả lời tôi đang tìm kiếm, cảm ơn Adam. –

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