CODEWITHSUNDEEP
javascriptknockout.jsdurandal
Kal_Torak
Kal_Torak

Reputation: 2551

KO cannot find template with ID

I've used Knockout templates before, so I'm not sure why this isn't working for me. I tried two different styles of ko markup, neither work.

<!-- more nesting levels -->
<div class="cal-day-tps" data-bind="foreach: timePeriods">
    <div class="cal-day-tp-cont">

        <div data-bind="template: { name: 'tp-ed-templ', data: $data }"></div>

        //both of these methods fail
        <!-- ko template: { name: 'tp-ed-templ', data: $data } -->
        <!-- /ko -->

    </div>
</div>    
<!-- /more nesting levels -->


<script type="text/html" id="tp-ed-templ">
 <!-- bunch of markup -->
</script>

I just get the error "Cannot find template with ID tp-ed-templ".

Probably just a typo, but I haven't been able to find it.

It seems to be an issue with Durandal, not Knockout.

I tried some extremely simple cases in vanilla durandal setups, and it still does the same thing. Even tried putting the script in the same nested location as the binding, no dice.

Upvotes: 6

Views: 6404

Answers (2)

user2246674
user2246674

Reputation: 7709

The issue is that the KO template element must exist in the DOM before the Durandal view is bound. This is because the view is bound before it is inserted into the DOM so any contained templates cannot be resolved by ID.

Using a function that returns an observable can be used to later re-trigger a template binding .. it works, but is wonky. (An if binding could be used for similar effect.)

// bind to this in markup:
//   <div data-bind="template: {name: $root.templateName, .. }">
vm.templateName = function () {
   return vm.TemplateId();
};

// Changing this will trigger an observable in the KO template binding;
// don't ask me why we have to pass in a function to 'name' ..
vm.TemplateId = ko.observable("dummy-template-id-that-exists");

// After the view is attached the correct template element is in the DOM
// so we can trigger the template to (re-)bind and it will find it.
function viewAttached () {
   vm.TemplateId("the-real-template-id");
}

Upvotes: 3

Kal_Torak
Kal_Torak

Reputation: 2551

The short answer: You can't currently use Knockout templates inside of Durandal. However, as nemesv pointed out, if you put your named template outside of Durandal, ko is able to find them. For example, anywhere outside of the <div id="applicationHost"></div> element.

The other workarounds are to either use Durandal's compose functionality, or just inline the templates as anonymous.

Knockout templates will probably be supported in the near future.

I finally dug these answers up on the Durandal google group,

Upvotes: 10

Related Questions