Ractive.js帶有破折號的變量

Question

后端（WordPress）生成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上仍然可以正常使用（請參見http://jsfiddle.net/6hd3xt6t/ ），並使用諸如{{sizes['thumbnail-height']}}等帶引號的屬性名稱