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();

你看，在$(Templates) find搜索：

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

所以它会在这三个<div>找到东西但不会在<div> s中找到它们; 另一方面， filter搜索元素集：

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

当你说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> ：

<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>视为不透明的黑框（假设您使用了正确的type属性），但它可能会尝试解释并更正<div>的内容。 问题是，在您处理完模板并将其填入后，您的模板可能不是有效的HTML; 如果你让浏览器得到无效的HTML，它可能会尝试纠正它，这可能会使你的模板大乱。