标签: jquery-templates

在knockout.js 2.1.0中,在使用foreach绑定的模板中,您可以通过$ index()函数访问当前项的索引.在嵌套的foreach绑定中,有没有办法从模板中访问$ parent的索引？

假设我有这样的数据结构:

var application = {
  topModel: [
    {
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]}, // this has top:0 and sub:0
      {subModel: [{'foo2':'foo2'}, { 'bar2':'bar2'}]} // this has top:0 and sub:1
    },
    {
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:1 sub:0
    },
    {
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:2 sub:0
      {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:2 sub:1
    },
    ...
    ]};

有了这个,我想使用索引打印每个模型的路径:[topModel-index subModel-index],这样输出将是这样的:

[0 0]
[0 1]
[1 0]
[2 0]
[2 1]
...

我使用foreach绑定了模型,但我无法弄清楚如何在subModel的上下文中访问topModel的索引.以下示例显示了我尝试过的方法,但它不起作用,因为我无法弄清楚如何访问$ …

如果我想将模板绑定到一个普通的旧字符串数组,我将什么放在$ {??}表达式中？

我希望这个片段不会太短,以免混淆:

<ul data-bind="template: { name: 'authorTemplate', foreach: authors }">
</ul>

作者很简单 ["a", "b", "c"]

<script type="text/x-jquery-tmpl" id="authorTemplate">
    <li>${what_do_I_put_here???}</li>
</script>

我试过:val value this和this.toString().最后两个显示[object Object],所以我怀疑我离它很近.

我看到,根据jQuery插件模板页面,jQuery插件已经从测试版发布到弃用,而没有通过真正的发布.我在jquery.com或其相关网站上找不到有关原因的任何信息.或者当替换可能时.也许1.8？

这非常令人沮丧,因为我的项目对jQuery模板进行了大量投资.现在它看起来是一个糟糕的投资,我们正在寻找其他基于jQuery的东西,包括JavascriptMVC.

有更好的建议吗？我很乐意在评论中提出理由或其他信息,但我更喜欢建议作为答案.

我正在尝试将Freemarker与jQuery模板结合使用.

两个框架都使用美元符号/花括号来标识替换的表达式(或者在freemarker中调用它们,"插值"),例如${person.name}.

因此,当我在该语法中定义带有表达式的jQuery模板时,Freemarker会尝试解释它们(并失败).

我试图逃避的各种组合${顺序通过的Freemarker通过它无济于事- ,\${,\$\{,$\{等.

在美元和卷曲(例如$<#-- -->{expression})DOES工作之间插入一个freemarker评论- 但我正在寻找一个更简洁和优雅的解决方案.

有没有更简单的方法来获得Freemarker模板输出字符序列${？

我将一个对象数组传递给jQuery模板(官方jquery-tmpl插件):

$("#itemTmpl").tmpl(items).appendTo("body");

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <div class="item">Name: ${name}, Index: ${???}</div>
</script>

在模板中显示项目索引的最简单方法是什么？优选地,不使用分离的外部函数,而不改变传递的对象结构,并且不改变模板结构(转换为{{each}}).是否有任何内置变量可能存储当前数组索引？

更新 我创建了一个建议将数组索引公开给模板项的票证,但它被关闭为无效...

我正在尝试将jQuery模板插入到Jinja2模板中.唉,他们(在默认设置中)分别使用胡须{{和}}表示表达式和文字.

我将我的jQuery模板插入带有script标签的HTML中,如下所示:

<script type='text/x-jquery-template'>
    <div>The people are:
         {{ each people }} 
          ${$value}
         {{ /each }}
    </div>
</script>

然而,如果上面是Jinja模板,它就会因为Jinja试图将其解释each为文字而贬低.

在这种情况下(我们已经有很多模板),改变Jinja2的变量开始和结束分隔符是不切实际的.此外,它令人困惑,降低了互操作性,并需要额外的培训.最好避免使用此选项.

所以我想到的两个替代方案就是:

1. Jinja2逃避每个'{{'和'}}',我不太确定如何做得最好("{{"{{"}}`,也许,但这很冗长);

2. 更实际 - 也许是理想的 - 会告诉Jinja2 不要解析代码块,也许是通过jQuery扩展.

我很感激你的想法和反馈.谢谢你的阅读.

所以jQuery模板永远不会超过beta,jsRender和jsViews应该填补空白.我查看了Boris Moore在此页面上发布的示例,但我没有区分jsRender和jsViews.此外,鲍里斯在另一个例子中使用了一个来增加混乱.所以问题是他们中的两个如何相关(或不同)？

我刚开始使用jQuery的模板引擎.到目前为止看起来相当不错.但我想知道是否有可能以某种方式从外部文件加载模板.想象一下,有大量的模板.这会弄乱html代码并且也不可缓存,并且必须在每个请求上下载.

我希望有一种方法可以在外部文件中定义它们,然后加载它们并将编译后的模板存储到localStorage中.

有没有人知道如何从外部文件加载它们？

背景:

我有这个模板,其中包含来自youtube的视频,其中包含swfobject.

题:

有没有办法包含脚本标签......

<script type="text/javascript">
</script>

在jQuery模板里面？

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    <script type="text/javascript">
        <!-- Some javascript here -->
    </script>
</script>

显然它不能直接工作,有没有办法在没有其他脚本内的脚本的情况下实现同样的事情？

我似乎无法绑定到html5拖放事件.

以下是模板的示例:

<script id="tabsTemplate" type="text/html">
    <div class="dropzone" for="tab"
        data-bind="event:{dragover: function(event){event.preventDefault();},
                          dragenter: function(event){event.target.addClass('dragover'); event.preventDefault();},
                          dragleave: function(event){event.target.removeClass('dragover'); event.preventDefault();}}
                          drop: function(event){console.log('blahblah!')}"></div>
    <h1 class="tab" draggable="true"
      data-bind="attr: {selected: $data.name === $item.selected()},
                 click: function(){$item.selected($data.name)},
                 event:{ dragstart: function(event){console.log('blah!!')},
                         dragend: function(event){document.getElementsByClassName('dragover')[0].removeClass('dragover')}}">
        ${name}

        <img src="icons/close-black.png" class="close button" role="button"
            data-bind="click: function(e){$item.close($data)}">
    </h1>
</script>

我所拥有的应该如预期的那样工作......只要我将它们设为正常的内联线,它就会发挥作用.但是,其他绑定不起作用!

我收到此错误消息:

未捕获的SyntaxError:意外的标记'||' 的jquery-tmpl.js:10

这里发生了什么？有什么我做错了吗？