knockoutJS 中的匿名模板

发布于 2024-12-21 07:03:37 字数 1930 浏览 1 评论 0原文

我有一段代码在 knockout.js 中工作,如下所示:

<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>

withdocspersontime 是我的自定义绑定。我想我应该使用匿名模板更简洁地重写它,如下所示:

<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>

但这失败并出现错误:

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

在 Knockout-1.2.1.debug.js 的第 1226 行中。这是指 UL 数据绑定。

我创建了一个 jsfiddle 来抽象这个问题,但是小提琴有效。我还应该注意什么来追踪这个问题?

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'> </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'> </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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

独木成林 2024-12-28 07:03:37

如果您按照您的说明使用淘汰赛 1.2.1:

...在 Knockout-1.2.1.debug.js 的第 1226 行。这是指 UL 数据
绑定。

……那就是你的问题了。您需要使用1.3.0版本。请参阅 中的“控制流绑定”部分http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/ 了解更多详情。

你的小提琴工作的原因是它使用了最新版本的淘汰赛。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文