jquery - 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) 内搜索:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

所以它会在这三个 <div> 中找到东西s 但不是 <div>自己； filter另一方面，搜索元素集:

Reduce the set of matched elements to those that match the selector or pass the function's test.

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

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

如果我们看看那些 <div> 的后代 s (即 find )，我们不会找到 #some-element-1但如果我们查看匹配元素集本身(即 filter )，那么我们会发现 #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，它可能会尝试纠正它，这可能会使您的模板变得一团糟。