RequireJS&Jquery - 一个文件中有多个模板？

Question

我正在使用require.js将一些模板文件加载到我的应用程序中,如下所示:

define(function(require) {
    var App = require('app'),
    TeamListTmpl = require('text!templates/team-list.html'),
    PlayerListTmpl = require('text!templates/player-list.html'),
    PlayerItemTmpl = require('text!templates/player-item.html');

然后,使用Backbone,我正在引用模板,如下所示:

var PlayerItemView = Backbone.View.extend({
    tagName: "li",
    template: _.template(PlayerItemTmpl),

拥有单独的模板文件有点烦人,我想将所有模板组合成一个html文件并提取单个元素.我试过这个:

   define(function(require) {
        var App = require('app'),
        Templates = require('text!templates/templates-combined.html');

模板组合的html文件如下所示:

<div id="some-element-1">1</div>
<div id="some-element-2">2</div>
<div id="some-element-3">3</div>

但由于某种原因,这不起作用:

$(Templates).find("#some-element-1").html();

我也尝试过:

$('#some-element-1', Templates).html();

有没有办法从一个组合文件中提取单个模板文件而不先将它添加到DOM？也许使用javascript模板代替？任何帮助将不胜感激.

Answer 1

我猜你想要使用filter而不是find:

var some_element_1 = $(Templates).filter('#some-element-1').html();

你看,find在以下内容中搜索$(Templates):

获取当前匹配元素集中每个元素的后代,由选择器,jQuery对象或元素过滤.

所以它会发现这三个人<div>的内心,而不是<div>他们自己; filter另一方面,搜索一组元素:

将匹配元素集减少到与选择器匹配的元素或传递函数的测试.

当你说var x = $(Templates),你x看起来像这样:

[
   <div id="..."></div>,
   <div id="..."></div>,
   <div id="..."></div>
]

如果我们看一下那些s(即)的后代,我们就找不到但是如果我们看一下匹配元素本身(即),那么我们就会发现.<div>find#some-element-1filter#some-element-1

如果由于某种原因你真的想要使用find,你可以<div>在你的模板周围包裹另一个,以迫使它们成为以下的后代$(Template):

<div>
    <div id="some-element-1">1</div>
    <div id="some-element-2">2</div>
    <div id="some-element-3">3</div>
</div>

我还建议你将模板包装在<script>元素而不是<div>s中:

<script type="text/x-template" id="some-element-1">1</script>
<script type="text/x-template" id="some-element-2">2</script>
<script type="text/x-template" id="some-element-3">3</script>

浏览器会将<script>s视为不透明的黑框(假设您使用了正确的type属性),但它可能会尝试解释和更正<div>s 的内容.问题是,在您处理完模板并将其填入后,您的模板可能不是有效的HTML; 如果你让浏览器得到无效的HTML,它可能会尝试纠正它,这可能会使你的模板大乱.