Polymer 1.0 - Các lớp css ràng buộc

Question

Tôi đang cố gắng bao gồm các lớp dựa trên các tham số của một json, vì vậy nếu tôi có màu của thuộc tính, $ = làm cho mẹo để chuyển nó thành thuộc tính lớp (dựa trên polymer documentation)

<div class$="{{color}}"></div> 

vấn đề là khi tôi đang cố gắng để thêm lớp đó cùng một thiết lập hiện tại của các lớp học, ví dụ:

<div class$="avatar {{color}}"></div> 

trong trường hợp $ = không làm các trick. Có cách nào để thực hiện điều này hoặc mỗi lần tôi thêm một lớp có điều kiện tôi phải bao gồm phần còn lại của phong cách thông qua bộ chọn css thay vì các lớp học? Tôi biết trong ví dụ này có thể màu sắc có thể đơn giản đi trong thuộc tính style, nó hoàn toàn là một ví dụ để minh họa cho vấn đề.

Xin lưu ý rằng đây chỉ là vấn đề trong Polymer 1.0.

Answer 1

Kể từ Polymer 1.0, nội suy chuỗi chưa được hỗ trợ (nó sẽ sớm được đề cập trong lộ trình). Tuy nhiên, bạn cũng có thể làm điều này với các ràng buộc được tính toán. Ví dụ

<dom-module> 
    <template> 
    <div class$="{{classColor(color)}}"></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    ... 
    classColor: function(color) { 
     return 'avatar '+color; 
    } 
    }); 
<script> 

Edit:

Tính đến Polymer 1.2, bạn có thể sử dụng hợp chất ràng buộc. Vì vậy,

<div class$="avatar {{color}}"></div> 

hiện hoạt động.

Answer 2

 <template if="[[icon_img_src]]" is="dom-if"> 
      <img class$="{{echo_class(icon_class)}}" src="[[icon_img_src]]"> 
     </template> 

     <span class$="{{echo_class(icon_class, 'center-center horizontal layout letter')}}" hidden="[[icon_img_src]]">[[icon_text]]</span> 

     <iron-icon icon="check"></iron-icon> 

    </div> 
</template> 

<script> 
Polymer({ 

    echo_class: function(class_A, class_Z) { 
     return class_A + (class_Z ? " " + class_Z : ""); 
    }, 

Answer 3

Cập nhật

Tính đến Polymer 1.2.0, bạn có thể bây giờ sử dụng Compound Bindings để

kết hợp xâu và bindings trong một tài sản duy nhất ràng buộc hoặc nội dung văn bản ràng buộc

như vậy :

<img src$="https://www.example.com/profiles/{{userId}}.jpg"> 

<span>Name: {{lastname}}, {{firstname}}</span> 

và ví dụ của bạn

<div class$="avatar {{color}}"></div> 

vì vậy đây là không còn là một vấn đề.

Câu trả lời dưới đây hiện chỉ liên quan đến các phiên bản của polymer trước 1.2

Nếu bạn đang làm điều này rất nhiều, cho đến khi tính năng này trở nên có sẵn mà là hy vọng soon bạn chỉ có thể xác định các chức năng ở một nơi như một tài sản của Polymer.Base trong đó có tất cả của nó là tài sản thừa kế của tất cả các yếu tố polymer

//TODO remove this later then polymer has better template and binding features. 
// make sure to find all instances of {{join(in polymer templates to fix them 
Polymer.Base.join = function() { return [].join.call(arguments, '');} 

và sau đó gọi nó như vậy:

<div class$="{{join('avatar', ' ', color)}}"></div> 

sau đó khi nó được giới thiệu bởi polymer đúng cách, chỉ cần loại bỏ một dòng, và thay thế

{{join('avatar', color)}} 

với

avatar {{color}} 

tôi sử dụng này rất nhiều vào lúc này, không chỉ dành riêng cho việc kết hợp các lớp học thành một, mà còn những thứ như tên con đường, tham gia với một '/', và chỉ nội dung văn bản nói chung, vì vậy thay vào đó tôi sử dụng đối số đầu tiên làm keo.

Polymer.Base.join = function() { 
    var glue = arguments[0]; 
    var strings = [].slice.call(arguments, 1); 
    return [].join.call(strings, glue); 
} 

hoặc nếu bạn có thể sử dụng tính năng es6 như rest arguments

Polymer.base.join = (glue, ...strings) => strings.join(glue); 

để làm những thứ như thế

<div class$="{{join(' ', 'avatar', color)}}"></div> 
<img src="{{join('/', path, to, image.jpg)}}"> 
<span>{{join(' ', 'hi', name)}}</span> 

chỉ cơ bản

Polymer.Base.join = (...args) => args.join(''); 
<div class$="{{join('avatar', ' ', color)}}"></div>