1

シンプルな backbone.js アプリがあります。ビューを HTML ページの DOM にレンダリングしたいのですが、このビューはモデルの詳細ビューです。私の HTML ページには、ビューをレンダリングしたい DIV 要素が既に含まれています。ビューを次のようにレンダリングしようとすると:

detailView = new RulesPanelView({model : @model})
$("#detail").html(detailView.render().el)

失敗し、レンダリングされた HTML ではなく、[Object HTMLDivElement] が DOM に挿入されます。

これが私がそれを機能させる唯一の方法であり、ハックのようです:

$("#detail").html('')
detailView = new RulesPanelView({model : @model})
$("#detail").append(detailView.render().el)

レンダリングする前に DIV の HTML を空にする必要があるため、追加で発生する #detail 内で複数のビューがレンダリングされません。

また、この方法であまりにも多くのビューを作成していませんか?最初のコード セグメントのように HTML を置き換える方がきれいに見えますか

このビューをレンダリングする正しい方法は何ですか?

4

2 に答える 2

6

あなたが望むのは、すでに挿入されたDOMノードをコンストラクターへの「el」オプションとしてビューに渡すことです:

new RulesPanelView({el: $("#detail")});

この方法では、再度レンダリングされません。ただし、ビューの「render」メソッドが更新されたモデルから正しいビューをレンダリングできることを確認する必要があります。

バックボーンのドキュメントでは、これが一度にレンダリングしすぎることを避ける良い方法であると述べています。

于 2011-02-23T23:48:14.673 に答える
1

ビューのメソッドに実際に追加します。renderモデルが変更されたときに再レンダリングする場合、これは機能しませんが、そのために、追加するrefresh前に render が実際に呼び出すメソッドを追加しました。次に、更新をモデルの変更にバインドします (必要な場合)。だから私の見解では、私はこれを行います：

render: function(){
    var markup = this.refresh();
    $(markup).appendTo('#some-selector');
    return this;
}, 
refresh: function(){
    return $(this.el).html($.mustache(this.template, this.model.toJSON()));
},

それが「最高」かどうかはわかりませんが、かなりうまく機能していると思います。また、すべてのモデルをループしてコレクション ビューの「サブビュー」をレンダリングするビューにバインドされたコレクションがある場所も見てきました。 .

于 2011-03-18T13:48:56.050 に答える