Question

I’m trying to implement Knockout.js-External-Template-Engine using a working demo of nested templates

Currently I have a setup like so

<ul data-bind="template: {name: 'TopTemplate'}"></ul>

<script type="text/html" id="TopTemplate">
    <li><span>Result</span>
        <ul data-bind=" template: {name:  'FooTemplate' , foreach: foos}">
        </ul>
    </li>
    <button data-bind='click: addFoo'>Add Foo</button>
</script>   

When I try to move this TopTemplate to a file (templates\view.html), view.html ie

<li><span>Result</span>
<ul data-bind=" template: {name:  'FooTemplate' , foreach: foos} " style="list-style-type:circle;margin-left:15px">
</ul>
</li>
<button data-bind='click: addFoo'>Add Foo</button>

fails ( unable to parse bindings….foos is not defined )

here’s my view model updated with the whichTemplateToUse

  var viewModel = {
    isEditable: ko.observable(false),
    foos: ko.mapping.fromJS([]),
    loadInitialData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    },
    whichTemplateToUse: function() {
        return viewModel.isEditable() ? 'edit' : 'view';
    }
};

I’m sure I’ve missed the point here – but do I need to change my Top Template data-bind expression

to allow the loading of an external sub template. The top template works with simple static text so I think the basic integration is correct.

thanks!

Answer 1

found a good demo which does this exact thing.