JSFiddle - React, Tailwind, and code Playground

HTML

<script id="template1">
    <div data-bind="text:symbolsLength"></div>
</script>
<script id="template2">
    static html
</script>
<input data-bind="value:symbols, valueUpdate: 'afterkeydown'" />
<button data-bind="click:click">Change Template</button>
<div data-bind="template:templateName"></div>

JavaScript

var vm={
    symbols:ko.observable('три'),
    templateName:ko.observable('template1'),
    click:function(){
        vm.templateName(
            (vm.templateName()=='template1')?
            'template2':
            'template1'
        );
    }
};
vm.symbolsLength=ko.computed(function(){
    alert(1);
    return vm.symbols().length;
})
ko.applyBindings(vm);