Search code examples
javascriptractivejs

Ractive.js variable with dash

Back end (WordPress) generates JSON output:

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

In JS I can use variable with a dash that way: sizes['thumbnail-height']. Unfortunately, in Ractive.js template {{sizes['thumbnail-height']}} does not work. How I can deal with this issue?

Solution

  • You can write the objects keys as string then you can use the - sign. That said is a good practice to avoid it and use camelCase style. If you realize for css attributes are always translated into camel case.

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

    The first case still works fine with Ractive (see http://jsfiddle.net/6hd3xt6t/) using the quoted property names like {{sizes['thumbnail-height']}}