Search code examples
ractivejs

How to change RactiveJs locale


Is it possible to change ractive instance locale?

I'm not quite sure what locale RactiveJs uses by default but floating point numbers are rendered as xxx.xx in my browser while the locale I want to specify uses a comma as a delimeter. So I want to change the locale that bindings use to format floating point values.


Solution

  • If not a string, Ractive will evaluate your data using toString() on it.

    May I suggest you create a simple component that does the job you need?

    Ractive.components.LocalNumber = Ractive.extend({
    
        computed: {
            formattedVal: function() {
                return (val || 0).toLocaleString();
            }
        },
    
        template: '{{ formattedVal }}'
    });
    

    Like so you can use this in any Ractive instance:

    new Ractive({
        el: document.body,
    
        data: function() {
            return {
                numeric: 42.42
            }
        },
    
        template: '<LocalNumber val={{ numeric }} />'
    })
    

    See in action in this fiddle: http://jsfiddle.net/2v06khLn/