标签: jquery-templates

我似乎无法绑定到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

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

好吧,我正在使用jQuery,tmpl-plugin和这个:

${$value.Text}

这没关系,工作正常,但正如我刚刚通过文档找到的那样:

使用{{html fieldNameOrExpression}}等同于使用$ {fieldNameOrExpression},除了它将未编码的文本呈现到HTML DOM中,而$ {}默认编码值.

好的.但我无法让{{html}}标签与我合作${$value.Text}.

我尝试了类似的东西{{html ${$value.Text}},{html ${$value.Text}}但它只是不起作用.

在过去的几天里,我一直在阅读关于Backbone.js以及它如何简化JS代码与View元素的交互,基本上是在HTML中.我还读到了KnockoutJS和Backbone.js之间的区别.现在我正在考虑是否使用其中一个不可避免地导致我们在我们的视图中复制我们已经存在于MVC应用程序中的代码(主要是ViewModel和global.asax中的路由).基本上要求我们在Backbone或Knockout中编写另一组模型.据我了解,使用KnockoutJS这更为普遍,这就是为什么我认为我会选择Backbone,但现在我认为它并没有那么不同 - 经过几个例子后我看到同样的重复变得明显.

另外我们如何维护这样的应用程序,例如我们已经拥有一堆MVC部分视图,现在我们应该使用一些像JQuery模板这样的模板引擎在Backbone中重新创建它们？

如果我有一个可观察的数组

foos = [{ name: "a" }, { name: "b" }, { name: "c" }]

在我的viewmodel上,我想呈现以下内容:

<ul>
  <li class="add-new-foo">Special stuff here</li>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

我非常接近

<ul data-bind="template: { name: 'foo-template', foreach: foos }">
  <li class="add-new-foo">Special stuff here</li>
</ul>

<script id="foo-template" type="text/html">
  <li data-bind="text: name"></li>
</script>

但最终把a,b,c 放在了.add-new-foo 后面.

有任何想法吗？在我的情况下,使用Knockout foreach而不是jQuery模板是至关重要的{{each}},因为Knockout文档中提到的好处.

我正在第一次看javascript模板,而mustache和jquery-tmpl是目前最有竞争力的竞争者.

我的一些要求:

• 模板将存在于单独的文件中,以包含在多个页面中
• 所有(或几乎所有)数据都将来自对返回json的restful api的调用
• 我们是一个java/eclipse商店,所以语法高亮和兼容性很好,如果这是一个问题

任何人都知道在速度,易用性,灵活性和稳定性方面的任何比较？我应该考虑的其他因素是什么？其他顶级模板引擎？

(我知道关于这个一般性主题还有其他 问题,但我没有看到这两者之间有任何直接,广泛的比较.)

是否可以在jquery模板中定义新变量？我阅读了官方的jquery模板文档但无法找到任何内容.我尝试了类似的东西,{{ var xxx=123 }}但它没有用.最后,我正在使用hack

${$item.xxx=123,""}

然后使用

$item.xxx

但我相信这不是最好的方法......

我注意到jquery的beta模板插件正在使用,类型属性为"text/x-jquery-tmpl"

例如

<script type="text/x-jquery-tmpl">

我以前没见过自定义使用type属性.有没有人看过当前使用过的这个例子,或者像我这样的凡人开发者可以在我们自己的代码中使用它？

我认为它是一种MIME类型,但我认为MIME类型支持取决于浏览器.所以我会假设不支持自定义MIME类型？

我有一些html文件包含jQuery.tmpl使用的模板.一些tmpl标签(如{{if...}})看起来像Django模板标签并导致TemplateSyntaxError.有没有办法可以指定Django模板系统应该忽略几行并按原样输出它们？

对于文档jquery.tmpl用途.appendTo插入模板到在渲染过程中的DOM:

$.tmpl( myTemplate, myData ).appendTo( "#target" );

我试图从另一个模板引擎转换现有应用程序,我的代码需要先将模板呈现为字符串,然后再将其添加到DOM中.这可能吗？怎么办？

更新:经过另一天深入研究这个问题后,我发现当前的jQuery模板库没有办法做到这一点.本文 介绍了一种很好的方法.

我仍然希望听到关于这样做的任何其他想法.上面链接的文章要求将返回的模板字符串插入DOM.似乎将DOM排除在外是理想的,并且浏览器的开销更少.想象一个大页面,其中包含多个可能无法使用的复合模板.虽然,也许是因为模板包装在脚本标签中,每个模板只有一个DOM项目？来吧,让我们听一些想法......

使用jQuery模板库,将多个相关的相对较小的模板组合在一起的最佳方法是什么？<script>每个模板需要一个标签吗？在通过AJAX动态提取这些模板的情况下呢？我能以某种方式组合这些模板吗？

考虑以下:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}}
    <tr class="detail"><td>Director: ${Director}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr>
</script>

现在因为这两个模板非常密切相关(一个取决于另一个),将它们合并到一个AJAX调用中是有意义的,并立即同时获取它们.我有一些想法,但我想知道是否有共同/最好的方法来做到这一点？目前我拉入一大块HTML,然后执行.find()来获取模板的HTML特定值......例如:

var templatePackage = fancyAjaxCalltoGetTemplates();

"templatePackage"可能看起来像这样:

<div id="templatePkg"> 
    <div id="movieTemplate">
    {{tmpl "#titleTemplate"}}
      <tr class="detail"><td>Director: ${Director}</td></tr>
    </div>    

    <div id="titleTemplate">
    <tr class="title"><td>${Name}</td></tr>
    </div>
</div>

然后我可以这样做:

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate') );

和

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate') );

...让我知道你的想法...你会做什么？