3

ラベル名 age のテキスト ボックスを追加し、backbone.js を使用してテンプレートで表示するにはどうすればよいですか?

<label> Age</label>
<input type = "text" name = "age" value="12"/>

これを属性としてモデルに追加し、テンプレートで表示したいと考えています。誰でも助けることができますか？backbone.js の基本を知っています。

4

2 に答える 2

1

テンプレートはBackboneに組み込まれていません。つまり、最初にテンプレートシステムを選択する必要があります。そこには多くの良いオプションがありますが、個人的にはハンドルバーが好きです。Mustache、（非常にミニマリストの）Underscoreテンプレート関数、複数のjQueryプラグインなどから選択することもできます。

ライブラリを選択したら、通常、ライブラリを使用してテンプレート関数をビルド/コンパイルし、HTMLを生成します。簡単なハンドルバーの例を次に示します。

var template = Handlebars.compile('<span>Hello {{target}}</span>');

これは（オプションで）ビューコードの一部として実行できます。

 var MyView = Backbone.View.extend({
     template: Handlebars.compile('<span>Hello {{target}}</span>')
 });

そのテンプレート関数を取得したら、通常、それに値マップを渡します。

var resultText = template({target: 'World!'});

レンダリングされた結果を取得します。

resultText == '<span>Hello World!</span>';

これをBackboneに自由に適合させることができますが、一般的なパターンの1つは次のようなものです。

 var MyView = Backbone.View.extend({
     template: Handlebars.compile('<span>Hello {{target}}</span>'),
     render: function() {
         var valueMap = this.model.toJSON();
         this.$el.html(this.template(valueMap));
     }
 });

 // Usage:
 new MyView({
     el: '#someElement',
     model: new Backbone.Model({target: 'World!'}
 )).render();
于 2013-03-06T06:00:23.817 に答える