用破折号

Question

后端（WordPress的）Ractive.js可变生成JSON输出：

sizes: { 
thumbnail: "150x150.jpg", 
thumbnail-width: 150, 
thumbnail-height: 150, 
} 

在JS我可以使用可变用破折号这种方式：sizes['thumbnail-height']。不幸的是，在Ractive.js模板{{sizes['thumbnail-height']}}不起作用。我该如何处理这个问题？

Answer 1

您可以将对象键编写为字符串，然后您可以使用 - 符号。这是避免它并使用camelCase风格的一个好习惯。如果你认识到CSS的属性总是翻译成驼峰的情况。

sizes: { 
    'thumbnail': "150x150.jpg", 
    'thumbnail-width': 150, 
    'thumbnail-height': 150, 
} 
// Best 
    sizes: { 
     thumbnail: "150x150.jpg", 
     thumbnailWidth: 150, 
     thumbnailHeight: 150, 
    } 

第一种情况仍然正常工作与Ractive使用像{{sizes['thumbnail-height']}}

引用的属性名称（见 http://jsfiddle.net/6hd3xt6t/）