3

OK、Backbone、node.js、Underscore、Backbone Boilerplate をいじっているので、十分な知識があります。私はまだ頭がよく理解できないので、狂ったように質問しています。現在、 Backbone BoilerplateでUnderscoreライブラリを使用して、データを渡すことができる非常に単純なテンプレートを作成しようとしています。モデルが更新されたら、テンプレートを変更するビューを変更します。JSファイル内にHTMLコードを書くのではなく、これが正しい方法だと思いますか? 私が間違っているなら、私を止めてください。

Backbone Boilerplate には、.fetch()私が理解しているテンプレート システムがあります。ただし、それは私のJSでHTMLを書くことを意味すると思います。そのため、アンダースコアを使用して、モデルからビュー、モジュールに情報を単純に渡して、テンプレートを再度レンダリングしたいと考えました (または、ビューを完全にスキップできるでしょうか?)。

私の質問は、なぜこれがうまくいかないのかということです.JSONに変更していないからだと思います.

私のHTMLテンプレート:

<div>
    <script id="rtemp" type="text/x-underscore-template">
        <span><%= title %></span>
    </script>​
</div>

そして JavaScript:

define([
  // Global application context.
  "app",

  // Third-party libraries.
  "backbone",
  "underscore",
  "json2"
],

function(app, Backbone) {
  var Attempt = app.module();

  Attempt.Model = Backbone.Model.extend({});
  Attempt.Collection = Backbone.Model.extend({});

  Attempt.Views.Tutorial = Backbone.View.extend ({
    template: "app/templates/attempt",
    render: function(done) {
      var tmpl = app.fetchTemplate(this.template);
      //console.info(tmpl);
      this.$el.html(tmpl({title: 'This is a title'}))
    }
  });

  return Attempt;
});

要素を調べると、要素が表示されます<div>が、テンプレート スクリプト タグがまだ残っているため、HTML のページには表示されません。最初に JSON に変換するために使用しようとしjson2ましたが、何か間違ったことをしない限り、うまくいかないようでした。アンダースコアは使用するのに最適ですか? バックボーンの依存関係なので、そう思いました。または、何か他のものを使用する必要があります。JS で HTML を記述したくないだけです。

4

1 に答える 1

4

私の理解が正しければ、最終的に次の HTML になります。

<div>
    <script id="rtemp" type="text/x-underscore-template">
        <span>This is a title</span>
    </script>​
</div>

これは、使用しているコードに基づく正しい動作ですが、明らかに望んでいる結果ではありません。

テンプレートの<script>ラッパーは、HTML ページ内にテンプレートを埋め込むときに使用されます。これは、ブラウザがテンプレートを HTML として解釈しようとしたり、ブラウザがテンプレートを独自にレンダリングしようとしたりしないようにするためです。このような場合、次のようにテンプレートを HTML ページに埋め込みます。

<!-- Some HTML stuff... -->
<script id="rtemp" type="text/x-underscore-template">
    <span><%= title %></span>
</script>​
<!-- Some other HTML stuff... -->

次のように使用します。

var t    = _.template($('#rtemp').html());
var html = t(...)

$('#rtemp').html()パーツはテンプレートの<script>ラッパーのコンテンツのみを抽出するため、表示さ_.templateれるだけ<span><%= title %></span>で、最終的に処理されたテンプレートはシンプルになり<span>ます。例: http://jsfiddle.net/ambiguous/dzPzC/

あなたの場合、全体<div><script>...</script></div>をテンプレートとして読み取り、それを にフィードしてい_.templateます。その結果、 にはtmpl({title: 'This is a title'})まだ が含まれて<script>おり、ブラウザは をどう処理するかを認識していない<script type="text/x-underscore-template">ため、<span>関心のある はまったくレンダリングされません。

ラッパーはまったく必要ありません<script>。生のテンプレートを HTML 内に埋め込む場合にのみ必要です。テンプレートには次のコンテンツのみが必要です<script>。

<span><%= title %></span>

デモ: http://jsfiddle.net/ambiguous/QuwSX/

テンプレート関数に渡す引数:

tmpl({ title: '...' })

コンパイルされたテンプレート関数は、JavaScript オブジェクトを表示したいだけです。人々はそれを JSON に渡すことについて話し、そのtoJSONメソッドを使用してテンプレート用のデータを準備することがよくありますが、それは用語の乱用です。テンプレートは実際にはオブジェクトを必要とし、JSON は技術的には文字列です。

于 2012-06-13T17:50:49.003 に答える