web-dev-qa-db-ja.com

Backbone.jsビューを既存の要素にアタッチするか、DOMにelを挿入する

私は最初の実際の非チュートリアルBackboneアプリを実装していますが、backbone.jsの使用に関して、2つの質問があります。これは、ビューのレンダリングelをDOM対elの既存の要素の使用。ここでいくつかの「教えられる瞬間」を皆さんに提供し、その助けに感謝します。

私がWebで見るほとんどのBackbone Viewの例では、Viewを作成するときにtagName、id、classNameのいずれかまたは両方を指定し、DOMから接続されていないelを作成します。通常、次のようになります。

_App.MyView = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
     ...
    },
    render: function () { 
        $(this.el).html(<render an html template>);
        return this;
    }
}); 
_

しかし、チュートリアルでは、レンダリングされたelをDOMに取り込むことを推奨する方法を常に説明しているわけではありません。いくつかの異なる方法を見てきました。だから、私の最初の質問は次のとおりです。ビューのレンダリングメソッドを呼び出してそのelをDOMに挿入する適切な場所はどこですか。 （必ずしも同じ場所ではありません）。ルーター、ビューの初期化またはレンダリング関数、または単にルートレベルのドキュメント準備関数で行われているのを見ました。 （ $(function () ） 。これらの作業のいずれかを想像できますが、それを行う正しい方法はありますか？

第二に、私はいくつかのHTMLマークアップ/ワイヤーフレームから始め、html部分をバックボーンビューに対応するjsテンプレートに変換しています。ビューにアタッチされていない要素をレンダリングし、それを固定するためにhtmlにアンカーポイントを提供するのではなく、ビューに要素が1つしかなく、消えない場合、より自然に感じます既存の空のラッパー要素（多くの場合、divまたはspan）をel自体として使用します。そうすれば、添付されていないelを挿入するためにドキュメント内の場所を見つけることを心配する必要はありません。これは潜在的に次のようになります（余分なレイヤーに注意してください）：

_<div id="insert_the_el_in_here">  <!-- this is all that's in the original HTML doc -->
    <div id="the_el">  <!-- i used to be a backbone generated, unattached el but have been rendered and inserted -->
        <!-- we're finally getting to some useful stuff in here -->
    </div>
 </div>
_

2番目の質問の一部は、基本的に静的なビューの場合、ページのHTMLの既存の要素をビューのelとして直接使用することで何か問題があるのですか？このようにして、すでにDOMの適切な場所にあることがわかり、renderを呼び出すとすぐにページのビューがレンダリングされます。これは、すでに存在する要素を「el」としてビューのconstructorに渡すことで実現できます。そうすれば、私はそれをDOMに固執することを心配する必要はありません（質問1種類を議論します）、レンダリングを呼び出すとすぐにDOMが更新されます。例えば。

_<form>
   <div someOtherStuff>
   </div>
   <span id="myView">
   </span>
</form>

<script type="text/template" id = "myViewContents"> . . . </script>

<script type="application/javascript">
window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          $(this.el).html(this.template());
          return this;
     }
});
$(function () {
    window.myView = new MyView({ el: $('#myView').get(0) });
});
</script>
_

これは、ページ上の静的ビューに対してそれを行うには良い方法ですか？つまり、これらのビューは1つだけであり、どのような状況でも消えることはありません。または、より良い方法がありますか？ビューの使用方法に基づいて、さまざまな方法（ルーター、親ビュー、ページ読み込みなど）を行う方法があるかもしれないことを理解していますが、現在は最初のページ読み込みを見ています使用事例。

ありがとう

javascriptbackbone.jsbackbone-views
71
Ben Roberts

ビューを既存のDOMノードにアタッチするという考えにはまったく問題はありません。

ビューのプロパティとしてelを配置することもできます。

window.MyView = Backbone.View.extend( {
     el: '#myView',
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView();
});

私がお勧めするのは、何をするかです... Backboneの美しさは、柔軟性があり、ニーズを満たすことです。

一般的なパターンに関する限り、一般的に、オーバービューを追跡するためのメインビューがあり、次にリストビューと個々のアイテムビューがあります。

初期化に関する限り、別の一般的なパターンは、何かを管理するための何らかの種類のAppオブジェクトを持つことです...

var App = (function ($, Backbone, global) {
    var init = function () {
        global.myView = new myView();
    };

    return {
        init: init
    };
}(jQuery, Backbone, window));

$(function () {
    App.init();
});

前に言ったように、物事を行うための間違った方法は本当にありません。 :)

さらに支援が必要な場合は、@ jcreamer898のTwitterに気軽にアクセスしてください。@ derickbaileyもチェックしてください。彼はBBの第一人者です。

楽しむ！

54
jcreamer898

HTML DOM Elementオブジェクトをオプションの「el」プロパティとしてビューに送信することもできます。

window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView({
        el: document.getElementById('myView')
    });
});
18
andho

デリゲートイベントメソッドを使用します。

initialize: function() {
    this.delegateEvents();
}

理由を理解するには： http://backbonejs.org/docs/backbone.html#section-138 「コールバックの設定、場所」の近く

0
Oleksandr Knyga

また、これらの日あなたがyouseすることができるように見えます setElement 。

0
pixelearth