JSFiddle - React, Tailwind, and code Playground

by robgallen

HTML

<em>I would like the tabs array to reflect the changes in the locale observable</em>
<ul data-bind="foreach: tabs">
    <li>
        <a data-bind="text: title, attr: { href: url }"></a>
        <span data-bind="text: unread"></span>
    </li>
</ul>
<em>Locale observable values</em>
<div data-bind="with: locale">
    <span data-bind="text: foo"></span>,
    <span data-bind="text: tabs.one"></span>,
    <span data-bind="text: tabs.two"></span>
</div>
<hr/>
<button data-bind="click: setEn">English</button>
<button data-bind="click: setFr">French</button>
<hr/>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JavaScript

var viewModel = function () {
    var self = this;
    //var tabTitles = ko.observable();

    self.locale = ko.observable();
    
    self.setEn = function() {
        var data = {
            foo: "bar",
            tabs: {
                one: "One",
                two: "Two"
            }
        };
        
        self.locale(data);
    };
    self.setFr = function() {
        var data = {
            foo: "bar en francais",
            tabs: {
                one: "Un",
                two: "Deux"
            }
        };
        
        self.locale(data);
    };
        
    self.tabs = ko.observableArray([{
        key: "one",
        title: "one",
        url: "#/one/foo",
        unread: null
    }, {
        key: "two",
        title: "two",
        url: "#/two/bar",
        unread: 2
    }]);
    
    // subscriptions
    self.locale.subscribe(function (data) {
        var newTabs = [];
        ko.utils.arrayForEach(self.tabs(), function(tab) {
            tab.title = data.tabs[tab.key];
            newTabs.push(tab);
        });
        self.tabs(null);
        self.tabs(newTabs);
    });
    
    // start off with english
    self.setEn();
};

ko.applyBindings(new viewModel());