JSFiddle - React, Tailwind, and code Playground

by infiniteloops

HTML

<script src=" 	  //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<span id='lblStuff' data-bind='localize: localizedValues'></span><br />
<span id='Other' data-bind='localize: localizedValues'></span>
<br />
<input type='button' value='click' id='btnClick' />

JavaScript

var localized = [
    {'lblStuff': 'value'},
    {'Other': 'otherVal'}
]

ko.bindingHandlers.localize = {
    update: function (element, valueAccessor) {
        var localArr = ko.utils.unwrapObservable(valueAccessor());
        var fltr = _.find(localArr, function(item){ return item[element.id];});
        $('#'+element.id).text(fltr[element.id]);
    }
};

function updateLocales(){
    var newLocal = [
        {'lblStuff': 'new value'},
        {'Other': 'new other value'}
        ];
    vm.localizedValues(newLocal);    
};

$('#btnClick').on('click', function(){
    updateLocales();
});

var LocalizationModel = function(initArray){
    var self = this;
    self.localizedValues = ko.observableArray(initArray);    
};

var vm = new LocalizationModel(localized);
ko.applyBindings(vm);