JSFiddle - React, Tailwind, and code Playground

by sukobuto

HTML

<h1>KnockoutJS Multilingualize</h1>


<section data-bind="messageContext: messages">
    <p>{{msg#hello}}</p>
    <p>{{msg#welcome_NAME [name:name]}}</p>
    <p data-bind="htmlMessage: 'NUM_accesses', placeholders: { num: num }"></p>
    <hr/>
    <div data-bind="foreach: [0,1,2]">
        <!-- You don't have to care the binding context to get messages. -->
        <p>{{msg#hello}}</p>
        <p data-bind="htmlMessage: 'NUM_accesses', placeholders: { num: $data }"></p>
    </div>
</section>

<button data-bind="click: changeLanguage">言語変更</button>

JavaScript

////////// messageContext binding ///////////

(function() {
    
    var contextKey = 'ko.messageContext';
    
    ko.bindingHandlers['messageContext'] = {
        init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            var context = {
                messages: valueAccessor(),
                placeholderSyntax:
                    ko.utils.extend(
                        {
                            start: '{',
                            end: '}'
                        },
                        allBindings.get('placeholderSyntax')
                    )
            };
            ko.utils.domData.set(element, contextKey, context);
        }
    };
    
    ko.bindingHandlers['message'] = {
        init: cacheContextIntoElement,
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            var message = processMessage(
                ko.utils.domData.get(element, contextKey),
                valueAccessor(),
                allBindings.get('placeholders'),
                allBindings.get('converters')
            );
            ko.bindingHandlers.text.update(element, function() { return message });
        }
    };
    ko.virtualElements.allowedBindings['message'] = true;
    
    ko.bindingHandlers['htmlMessage'] = {
        init: cacheContextIntoElement,
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            var message = processMessage(
                ko.utils.domData.get(element, contextKey),
                valueAccessor(),
                allBindings.get('placeholders'),
                allBindings.get('converters')
            );
            ko.utils.setHtml(element, message);
        }
    };
    ko.virtualElements.allowedBindings['htmlMessage'] = true;
    
    ko.bindingHandlers['attrMessage'] = {
        init: cacheContextIntoElement,
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext)...