4

次のように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),

個々のテンプレートファイルがあるのはちょっと面倒です。すべてのテンプレートを1つの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に追加せずに、1つの結合されたファイルから個々のテンプレートファイルを抽出する方法はありますか？おそらく代わりにjavascriptテンプレートを使用していますか？どんな助けでも大歓迎です。

4

1 に答える 1

9

私はあなたがではfilterなく使用したいと思っていると思いますfind：

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

ほら、 ：内でfind検索$(Templates)

セレクター、jQueryオブジェクト、または要素によってフィルター処理された、一致した要素の現在のセット内の各要素の子孫を取得します。

したがって、これら3つの内部にあるものは検出されますが、それ自体は検出され<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>

また、テンプレートをs<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>sを不透明なブラックボックスとして扱いますが（適切なtype属性を使用している場合）、sの内容を解釈して修正しようとする場合があります<div>。問題は、テンプレートを処理して入力するまで、テンプレートが有効なHTMLではない可能性があることです。ブラウザに無効なHTMLを取得させると、ブラウザがそれを修正しようとする可能性があり、それによってテンプレートが大きく混乱する可能性があります。

于 2012-06-24T16:29:49.110 に答える