3

バックボーン プロジェクトで 2 つの双方向データ バインディングにRivets.jsを使用しており、反復バインディングを実装したいと考えています。ドキュメントは反復バインディングが可能であることを示唆していますが、利用可能な例はありません。シンプルな Rails API を使用して JSON をクライアントに送信し、コンテンツを反復処理したいと考えています。Rivets.js でこの機能を動作させることに成功した人はいますか?

参考資料：Backbone.jsとRivets.jsを使った簡単な例

jsFiddle はこちら: http://jsfiddle.net/rhodee/3qcYQ/1/

Rivets.js サイトから

反復バインディング

各項目のバインド ルーチンが Rivets.js に含まれる可能性がありますが、data-html バインドを一連のフォーマッターと共に使用して、コレクションの並べ替えと反復レンダリングを行うことができます (他の優れた機能の中でも特に)。

<ul data-html="model.tags | sort | tagList"></ul>
4

4 に答える 4

3

この答えを拡張する：

0.3.2 の時点で、まさにこの目的のための data-each-[item] バインディングがあります。

Rivets.js サイトのすぐに使用できる例は、このユース ケースでは機能しないため、Backbone Collection で動作するように Rivetsアダプターを具体的に変更する必要があることに注意してください。

に次のようなものが必要ですrivets.configure({ adapter: ... })。

...
read: function( obj, keypath ) {
    return obj instanceof Backbone.Collection 
       ? obj["models"] 
       : obj.get(keypath)
}

そして JS Fiddle: http://jsfiddle.net/tigertim719/fwhuf/70/

ボーナス ポイントとして、モデルに埋め込まれたコレクションは、アダプターで追加の処理が必要になります。

詳細については、Rivets.js Github の問題に関する次の投稿を確認してください:
Binding to Backbone.Collection with the data-each-binding

于 2012-10-13T19:30:34.480 に答える
2

0.3.2の時点で、まさにこの目的のためのdata-each-[item] バインディングがあります。

<ul>
  <li data-each-todo="list.todos">
    <input type="checkbox" data-checked="todo.done">
    <span data-text="todo.summary"></span>
  </li>
<ul>

Rivets.js の以前のバージョンでは、参照した回避策は、フォーマッタを使用して反復レンダリングを実装することです。たとえば、itemList フォーマッタが配列をループして、レンダリングされた HTML を返す場所でdata-htmlバインディングを作成します。 model.items | itemList.

rivets.formatters.itemList = (array) ->
  ("<li>#{item.name}</li>" for item in array).join ''
于 2012-08-11T02:07:57.810 に答える
1

UnderscoreJSは Backbone に統合されているため、_. each()などのネイティブ メソッドを使用したり、統合された Backbone Collection アンダースコア メソッドを使用したりできます。

これはあなたが探しているものですか？

于 2012-08-07T23:12:56.167 に答える
0

cayuu の答えは正しかった。しかし、フィドルの rivets.js 参照が機能していなかったため、結果が表示されません。

以下のバージョンをチェックして、アクションを確認してください。

http://jsfiddle.net/tigertim719/fwhuf/70/

rivets.configure({
  adapter: {
    subscribe: function(obj, keypath, callback) {
      obj.on('change:' + keypath, callback);
    },
    unsubscribe: function(obj, keypath, callback) {
      obj.off('change:' + keypath, callback);
    },
    read: function(obj, keypath) {
        return obj instanceof Backbone.Collection ? obj["models"] : obj.get(keypath);
    },
    publish: function(obj, keypath, value) {
      obj.set(keypath, value);
    }
  }
});

最も重要な部分は

read: function(obj, keypath) {
            return obj instanceof Backbone.Collection ? obj["models"] : obj.get(keypath);
        },

これにより、バックボーンからコレクションとモデルを読み取る方法がリベットに伝えられます。

于 2013-05-08T00:32:20.910 に答える