3

Backbone.jsは非常に柔軟性があるため、特定のものに対する最善のアプローチについて疑問に思っています。ここで、「。render（）」と「.remove（）」が互いに正しく反転するように、アプリケーションのビューを構築することになっているのではないかと思います。

最初は、最もクリーンに見える方法は、アタッチするIDまたはjQuery要素をビューに渡すことです。ただし、このように行われた場合、メイン要素がDOMに戻されることはないため、「。render（）」を呼び出してもDOMのビューは正しく置き換えられません。

App.ChromeView = Backbone.View.extend({
  render: function() {
    // Instantiate some "sub" views to handle the responsibilities of
    // their respective elements.
    this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
    this.menu = new App.NavigationView({ el: this.$("nav") });
  }
});

$(function() {
  App.chrome = new App.ChromeView({ el: $("#chrome") });
});

.remove（）と.render（）が正反対になるように設定することをお勧めします。

App.ChromeView = Backbone.View.extend({
  render: function() {
    this.$el.appendTo('body');
    this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
    this.menu = new App.NavigationView({ el: this.$("nav") });
  }
});

$(function() {
  App.chrome = new App.ChromeView();
});

Backbone.jsコミュニティは何と言っていますか？.remove（）と.render（）は同じコインの反対側にあるべきですか？

4

3 に答える 3

2

render私はそれがビューの要素をdomに添付しないことを好みます。これにより、緩い結合、高い凝集度、ビューの再利用が促進され、単体テストが容易になると思います。レンダリングされた要素を、ルーターまたはメインの「レイアウト」タイプのコンテナービューのいずれかまでのコンテナーにアタッチしたままにします。

良い点removeは、ビューが親要素の知識を持たなくても機能するため、疎結合で再利用できることです。#mainレイアウトHTML（またはその他）からランダムなDOMセレクターをビューに配置するのは絶対に好きではありません。そこには間違いなく悪い結合があります。

特定の厄介な状況では、選択したjQueryプラグインのように、要素がDOMにアタッチされた後に実行するためにコードが必要になることに注意してください。このような場合、私は通常postAttach()、ビューにコールバックを実装し、そこにあるコードの量をできるだけ少なくしようとします。

于 2012-04-18T19:15:36.040 に答える
2

はい、社内View.remove()は非常に積極的です。

外部を使用してビューを再作成することを提案するために、私は次のelようにビューを書き直すために使用されます。

remove: function(){
  this.$el.empty();
  return this;
}

しかし、この外部DOM要素の削除を回避するために、フレームワークが魔法の動作を実装する必要はないと思います。

このフレームワークの動作は積極的ですが、上記のように必要に応じてカスタマイズするのは非常に安価です。

于 2012-04-18T20:21:46.773 に答える
0

これはどうですか？.initializeと.renderにparentSelectorプロパティを取得させるだけの場合、これを実行すると、次のような使用法になります。

  • 緩く結合
  • リバーシブル.remove（）/。render（）
  • 呼び出し元メソッドの単一メソッドのインスタンス化とレンダリング

例えば：

// Bootstrap file
curl(['views/app']).then(
    function(App){
        app = new App('body');
    });



// view/app.js
   define([
        'text!views/app.tmpl.html'
    ,   'link!views/app.css'
    ]
,   function (template) {

    var App

    // Set up the Application View
    App = Backbone.View.extend({
        // Standard Backbone Methods
        initialize: function (parentSel) {
            console.log('App view initialized')
            if (parentSel) { this.render(parentSel) }
        }
    ,   render: function (parentSel) {
            if (parentSel) { this._sel = parentSel } // change the selector if render is called with one
            if (!this._sel) { return this } // exit if no selector is set

            this.$el.appendTo(this._sel)

            this.$el.html(
                this.compiledTemplate({ 'content':'test content' })
            );
            return this
        }
        // Custom Properties
    ,   compiledTemplate: _.template(template)
    })

    return App
});


// External usage
// I can call .remove and .render all day long now:
app.remove()
app.render()
app.remove()
于 2012-04-18T20:52:43.640 に答える