CODEWITHSUNDEEP
knockout.js
Gene Golovchinsky
Gene Golovchinsky

Reputation: 6131

Anonymous templates in knockoutJS

I have a piece of code working in knockout.js like this:

<div>
    ... some other markup here

    <div class="topicDetail" data-bind='template: { name: "topicTemplate", data: activeTopic}'> </div>

</div>

<script type="text/html" id="topicTemplate">
    <ul class="querylist" data-bind='template: {name: "queryTemplate", foreach: queries}'></ul> 
</script>                                           

<script type="text/html" id ="queryTemplate">
    <li class="query" data-bind="css: { active: selected()}, queryType: type">
        <span class="querylink" data-bind="click: select">{{= text}}</span>
        <span data-bind="withdocs: positiveExamples"></span>
        <span data-bind='person: searcher'>&nbsp;</span>
        <span data-bind='time: time'></span>
    </li>
</script>

withdocs, person, and time are my custom bindings. I thought I should rewrite it more succinctly using anonymous templates like this:

<div class="topicDetail" data-bind="with: activeTopic">
    <ul class="querylist" data-bind="foreach: queries">
         <li class="query">
            <span class="querylink" data-bind="click: select">{{= text}}</span>
            <span data-bind="withdocs: positiveExamples"></span>
            <span data-bind='person: searcher'>&nbsp;</span>
            <span data-bind='time: time'></span>
         </li>
    </ul>
</div>

But this fails with the error:

Uncaught Error: Unable to parse binding attribute.
Message: ReferenceError: queries is not defined;
Attribute value: foreach: queries

in line 1226 of knockout-1.2.1.debug.js. This refers to the UL data binding.

I created a jsfiddle that abstracted this problem, but the fiddle works. What else should I be looking at to track this down?

Upvotes: 2

Views: 1964

Answers (1)

Mark Robinson
Mark Robinson

Reputation: 13278

If you are using knockout 1.2.1 as you stated:

...in line 1226 of knockout-1.2.1.debug.js. This refers to the UL data binding.

... then that is your problem. You need to use version 1.3.0. See the section on "Control flow bindings" in http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/ for more details.

The reason your fiddle worked is that it using the latest version of knockout.

Upvotes: 3

Related Questions