JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<script type="text/html" id="Overview">
    <h1>Overview</h1>
    <p>Dies ist das Overview template.</p>
</script>
<script type="text/html" id="Overview.DE">
    <h1>Overview.DE</h1>
    <p>Dies ist das deutsche Overview template.</p>
</script>
<div data-bind="sitTemplate: 'Overview'></div>

JavaScript

var extData = {
  Overview: {
    key: 'tmplKey',
    variations: {
      '*': 'Overview',
      'DE': 'Overview.DE'
    }
  }
};

var model = {
  tmplKey: ko.observable('')
};

ko.bindingHandlers.sitTemplate = {
  init: ko.bindingHandlers.template,
  update: function (element, valueAccessor, allBindingsAccessor, context, bindingContext) {
    var name = valueAccessor(),
        newName = name,
        tmplJson = extData[name] || null,
        key;
    if (tmplJson !== null) {
      key = ko.unwrap(context[tmplJson.key]);
      newName = tmplJson.variations[key] || tmplJson.variations['*'];
    }
    ko.bindingHandlers.template.update(element, function () { return newName; }, allBindingsAccessor, context, bindingContext);
  }
};

ko.applyBindings(model);