用破折號

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/）