Làm cách nào để tạo các lớp học động trong một thành phần ember 2.0?

Question

Ví dụ: Thành phần Ember cho phép bạn thêm mảng classNames và các lớp đó sẽ được thêm vào div chính của thành phần. nói, chúng tôi đã thành phần này được gọi là mới div

export default Ember.Component.extend({ 
    classNames: ['container'] 
}); 

sau đó nếu bạn kiểm tra thành phần này khi trả lại bạn sẽ thấy:

<div id="ember595" class="ember-view container"> 
... 
<div> 

này là tốt nhưng vấn đề của tôi là những gì nếu tôi muốn sử dụng thành phần này như là một thùng chứa chất lỏng đôi khi và đôi khi tôi có thể muốn làm cho nó một jumbotron vv.

Có cách nào để làm điều này trong html và có component.js áp dụng nó một cách chính xác?

{{new-div extra-classes='class1,class2'}} 

sau đó trong component.js:

export default Ember.Component.extend({ 
    classNames: [this.get('class-names')] 
}); 

Answer 1

Bạn có thể thêm tên lớp chỉ đơn giản bằng cách xác định chúng bên trong thuộc tính class trên thành phần của bạn:

{{new-div class="class1 class2"}} 

Answer 2

Cũng như là một thay thế có thể sử dụng một cái gì đó như thế này

export default Ember.Component.extend({ 
attributeBindings: ['style'], 

    style: function(){ 
     return new Ember.Handlebars.SafeString('class="foo bar"'); 
    }.property(), 
}); 

// NOT sure on this one untested 
export default Ember.Component.extend({ 
attributeBindings: ['classNames'], 

    classNames: function(){ 
     return 'foo bar'; 
    }.property(), 
}); 

Answer 3

Các @dmk'solution là sạch nhất một, nhưng nếu kịch bản của bạn nó không làm việc bạn có thể sử dụng classNameBindings:

export default Ember.Component.extend({ 
    classNameBindings: ['getClassNames'], 
    getClassNames: Ember.computed('extra-classes', function(){ 
    return this.get('extra-classes').replace(',', ' '); 
    }) 
}) 

Answer 4

Nếu ai đó đang sử dụng ember-phần-css, bạn có thể muốn thử ra các join-classes hoặc trình trợ giúp thuộc tính local-class.

{{join-classes styles.myclass1 attributeValue}} 

attributeValue có thể là một giá trị từ bộ điều khiển của thành phần (Ý tôi là component.js), hoặc một mục bên trong một khối each.

Nếu styles.myclass1 = .class1, và attributeValue = .dummy, sau đó các selectors sẽ có sẵn như .class1.dummy trong styles.css.

local-class={{(concat "myclass-" myvalue)}} 

Nếu myvalue = 'part', sau đó với điều này, các classname tạo sẽ bao gồm tree-to-component_myclass-part__sdfje2jbr2 (phần cuối cùng được tạo ra id), và sẽ có thể truy cập trong stylesheet như .myclass-part.