72

私は最初の実際の非チュートリアルBackboneアプリを実装していますが、バックボーン.jsの使用の側面について、2つの質問があります。これは、ビューのレンダリングelをDOMに挿入することと、使用することとの関係です。の既存の要素el。私はここであなた方全員にいくつかの「教えられる瞬間」を提供すると思います、そして助けに感謝します。

Webで見られるほとんどのバックボーンビューの例では、ビューを作成するときに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に取り込むことを推奨する方法を説明できるとは限りません。私はそれをいくつかの異なる方法で見てきました。したがって、私の最初の質問は、ビューのrenderメソッドを呼び出してその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の既存の要素をビューのHTMLとして直接使用することに何か問題がありますelか？このようにして、すでにDOMの適切な場所にあることがわかり、renderを呼び出すと、ページのビューがすぐにレンダリングされます。これは、すでに存在する要素をビューの構成要素に「el」として渡すことで実現できます。そうすれば、私はそれをDOMに貼り付けることを心配する必要がないように思えます（質問1を一種の議論の余地があります）、renderを呼び出すとすぐに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つだけであり、どのような状況でも消えることはありません。それとももっと良い方法はありますか？ビューの使用方法に基づいて、さまざまな方法（ルーター、親ビュー、ページの読み込みなど）があることに気付きましたが、現在は最初のページの読み込みを確認しています。使用事例。

ありがとう

4

4 に答える 4

54

ビューを既存の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();
});

私がお勧めするのは、うまくいくことをすることです...バックボーンの美しさは、柔軟性があり、ニーズを満たすことです。

一般的なパターンに関する限り、一般的に私は、オーバービューを追跡するためのメインビューを持っていることに気付きます。次に、リストビューと個々のアイテムビューを持っているかもしれません。

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

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

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

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

前に言ったように、物事を行うための間違った方法は実際にはありません。うまくいくことをするだけです。:)

さらにヘルプが必要な場合は、ツイッター@jcreamer898で私に連絡してください。@derickbaileyもチェックしてください。彼は一種のBBの第一人者です。

楽しむ！

于 2012-05-25T03:10:32.860 に答える
18

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

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')
    });
});
于 2013-02-05T06:46:34.727 に答える
0

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

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

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

于 2014-04-23T15:30:34.270 に答える
0

最近では、 setElementを使用できるようにも見えます。

于 2016-10-21T16:58:28.923 に答える