javascript - 带破折号的 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

您可以将对象键写为字符串，然后可以使用 - 符号。这就是避免它并使用驼峰命名风格的好习惯。如果您意识到 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']}}