は、私はこのような基本的に行くバックボーンでrenderメソッドを持っている方法

Question

レンダリングバックボーンでjQueryプラグインを呼び出す：ルータのアクションから呼び出され

render: function() { 
    $.tmpl(this.template, attrs).appendTo(this.el); 
    return this; 
}, 

：今

action: function() { 
    $('#container').empty(); 
    $('#container').append(myView.render().el); 
}, 

、Iこのビュー内にあるlabel要素にプラグインを適用します。

render: function() { 
    $.tmpl(this.template, attrs).appendTo(this.el); 
    this.$('label').inFieldLabels(); 
    return this; 
}, 

が、これは（私は要素がまだDOMに追加されていないためであると仮定しています）動作しません。私が最初に考えたrender内のプラグインを呼び出すことでした。

action: function() { 
    $('#container').empty(); 
    $('#container').append(myView.render().el); 
    myView.$('label').inFieldLabels(); 
}, 

プラグインはビューではなく、ルータの一部であるため、私はむしろ、これをしないと思いますので、それはなりません：それは、私も、ルータの動作にプラグインを呼び出す場合作業を行います行動の中でそれを呼ぶ感覚。これを行うより良い方法はありますか？

Answer 1

loadPluginsメソッドをビューに追加することでこの問題を解決しました。そのため、アクションでのレンダリング後にmyView.loadPlugins()を実行できます。それは理想的ではありませんが、機能します。

---

編集：まあ、私はheard from the horse's mouthをした要素がDOMに追加されています前に、私はプラグインを適用することはできませんので、私は（loadPluginsで）上記のように行うことができますいずれかのように見えるか、I renderメソッドで要素がDOMに追加されるようにコードを変更できます。これが似たような立場にある人に役立つことを願ってここで

は、私は今それをやっている方法は次のとおりです。

//in router 
action: function() { 
    var myView = new MyView({ 
    el: '#container' 
    }); 
} 

//in view 
render: function() { 
    $.tmpl(this.template, attrs).appendTo(this.el); //this now appends to the DOM 
    this.loadPlugins(); 
    return this; 
}, 

loadPlugins: function() { 
    this.$('label').inFieldLabels(); 
    //and other plugins 
}, 

Answer 2

Beterは、それをこのようにします：

action: function() { 
    var container = $('#container'); 

    container.empty(); 
    myView.render(container); 
}, 

render: function (container) { 
    $(this.el) 
     .append($.tmpl(this.template, attrs)) 
     .appendTo(container); 
    $('label', this.el).inFieldLabels(); 
    return this; 
}, 

Answer 3

私は同様の問題に直面していたが、私の場合にも、上記の解決策ではないだろう親ビューがまだDOMに追加されていなかったためです。

親ビューを持つ規約に従うと、DOMに子が追加され、renderメソッドでloadPlugins（）が機能しませんでした。

これは私がやったことです。時間によってタイムアウト機能が取得するので、終了する現在のコールスタックが

render: function() { 
    var self = this; 

    setTimeout(function() { 
    $(self.el).setupPlugin(); 
    }, 0); 

    return this; 
} 

0のsetTimeoutメソッドを使用することができます：それはどのように階層全体あなたの意見を管理しているに応じて、ハックのようなものを感じているが、助けることができますビューと呼ばれ、そのすべての親がDOMに追加されました。 （上記の規約に従うならば）。

Answer 4

jQuery Tools Tooltipプラグインを設定して同様の問題が発生しました。しかし、私はうまくいろいろなアプローチを取っていました。つまり、ビュー上でカスタムイベントをトリガーします。私が知る限り、Backboneに組み込まれた「dom intoに挿入された」イベントはないので、私はそれを自分でやっただけです。私はルータを使用していないが、上記変更されたコードは次のようになります：

// In the router: 
action: function() { 
    var container = $('#container'); 

    container.append(myView.render().el)); 
    myView.trigger('rendered'); 
}, 

// In the view: 
initialize: function() { 
    this.bind('rendered', this.afterRender, this); 
}, 
render: function (container) { 
    $(this.el).append($.tmpl(this.template, attrs)) 
    return this; 
}, 
afterRender: function() { 
    $('label', this.el).inFieldLabels(); 
} 

私は利点は、ビューはそのコンテナの無知のままということであるとします。欠点は余分な行または2つのコードのようなものです。しかし、多くのプラグインをセットアップする必要がある場合や、DOM内に要素が必要な要素を増やす必要がある場合は、正常に動作します（ロジックが分離されたままになります）。

私は実際に@ Skilldrickのコンテナをビューに渡す方法が好きですが、親ビューに子を挿入する責任があるかのように感じます。私はBackboneを初めて使っていますので、お気軽にコメントしてください。それはそう、コードを修正する」ことで、基本的に私が何を意味するかだ -

render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    $('#email1dropdown', this.el).dropdownify(); 

    return this; 
}, 

Answer 5

私はレンダリング機能にjQueryのためのコンテキストを指定するだけで私のjQueryプラグイン のために働くためにこれを取得することができました要素は `render`メソッドでDOMに追加されます。ちなみに `$（ 'label'）`は `$（ 'label'、this.el）`の省略形です。