Việc kết nối lớp có điều kiện với lớp hiện tại

Question

Tôi nhận thấy một vấn đề với các ràng buộc thuộc tính có điều kiện khi cố gắng kết hợp chúng với một lớp thông thường trên cùng một phần tử. Dưới đây là các tay lái đánh dấu tôi đang cố gắng:

<a href="#" class="button" {{bindAttr class="isDirty:dirty:clean"}} {{action save}}>Save</a> 

Những gì tôi mong đợi để được tạo ra là:

<a href="#" class="button clean" data-bindattr-3="3" data-ember-action="4">Save</a> 

Nhưng những gì đang thực sự tạo ra là:

<a href="#" class="button" data-bindattr-3="3" data-ember-action="4">Save</a> 

Khi tôi thay đổi mô hình , nó tạo ra lớp bẩn một cách chính xác:

<a href="#" class="button dirty" data-bindattr-3="3" data-ember-action="4">Save</a> 

Nếu tôi cố gắng di chuyển các lớp sau khi ràng buộc, nó sẽ tạo ra các lớp có điều kiện chứ không phải là tuyên bố một:

<a href="#" {{bindAttr class="isDirty:dirty:clean"}} class="button" {{action save}}>Save</a> 

Tạo các điều kiện nhưng không nút lớp:

<a href="#" class="clean" data-bindattr-3="3" data-ember-action="4">Save</a> 

Những gì tôi muốn là để nó tạo ra cả lớp được khai báo kết hợp và lớp có điều kiện chỉ sử dụng các Handlebars (mà không phải tạo ra một khung nhìn). Có một cách khác để làm điều này?

Answer 1

Trong template guides nó mô tả một cách để kết hợp các lớp học tĩnh và bị ràng buộc cho một mục:

Nếu bạn cần một yếu tố để có một sự kết hợp của các lớp học tĩnh và bị ràng buộc, bạn nên bao gồm các lớp tĩnh trong danh sách các thuộc tính bị ràng buộc, bắt đầu bằng dấu hai chấm.

Trong trường hợp của bạn, bạn sẽ làm điều gì đó như thế này:

<a href="#" {{bindAttr class=":button isDirty:dirty:clean"}} {{action save}}>Save</a> 

Dưới đây là một ví dụ làm việc http://jsbin.com/ixupad/82/edit

Answer 2

Tính đến Ember 1.11 bạn có thể sử dụng inline-if-syntax

<a href="#" class="button {{if isDirty 'dirty' 'clean'}}" {{action save}}> 
    Save 
</a>