0

handlebars.js テンプレートがとても気に入っていますが、データ バインディングを接続して、データが変更されたときにテンプレートを更新したいと考えています。私はすでにこのようなことをする方法を知っています:

var users = ['hello','world','third'];
var source = '<form>{{#each users}}<input type="text" value="{{this}}">{{/each}}</form>';
var template = Handlebars.compile(source);
$('.form-cont').html(template({users: users}));

後で別のユーザーを追加したい場合

users.push('last');

テンプレートを更新するために、HTML を更新します

$('.form-cont').html(template({users: users}));

上記のコードでは、元の html が消去され、新しいテンプレートに置き換えられています。変更されたものだけを更新する方法はありますか? 元の入力を消去することなく、each にアイテムを追加することを意味します。

Knockout.js、Angular.js、Ember.js のフレームワークにこれが組み込まれていることは知っています。フレームワーク全体ではなく、テンプレート バインディングのみを処理する、より軽量なソリューションを探しています。そこに何かありますか？

4

1 に答える 1

0

ハンドルバーにはデータ バインディングが組み込まれていません。Ember.js と Sproutcore は、データ バインディング拡張機能を備えたハンドルバー テンプレートを使用します。Backbone.js と統合するための juggy/backrub や backbone.modelbinding などのライブラリもあります。また、一般的なデータ バインディングのサポートについては mikeric/rivets を参照してください。軽量のオプションは、pub-sub 機能 (azer/new-list など) を備えたイベント配列実装を使用することです。

于 2013-06-09T05:50:02.137 に答える