バックボーンのビュー要素をdivにラップする方法

Question

私は、Backbone.jsを使用するストラットのSlidesnapshotにラッパーdivを追加する際に問題に直面しています。

render: function() { 
    if (this._slideDrawer) { 
     this._slideDrawer.dispose(); 
    } 
    this.$el.addClass('testall'); 
    this.$el.wrap('<div class="check"></div>'); 
    this.$el.html(this._template(this.model.attributes)); 

.addClassはdiv要素にクラスを追加しましたが、私は、親のdiv内のhtmlをラップすることはできませんよ。

Answer 1

バックボーンビューは1つのDOM要素を表し、view.elでアクセスできます。

多くの場合、親ビューはその要素をDOMに配置する前に子ビューをレンダリングしています。したがって、子ビューはdivでラップしますが、親は依然としてview.elを使用して元の要素を取得します。見るためのdevのツールを使用して結果を点検し

var Child = Backbone.View.extend({ 
 
    template: "<span>This is the template</span>", 
 
    render: function() { 
 
    // create a wrapper 
 
    var $wrap = $('<div class="check"></div>'); 
 
    // keep a reference to the original element 
 
    this.$innerEl = (this.$innerEl || this.$el).addClass('testall') 
 
     .html(this.template); 
 
    // wrap the inner element. 
 
    $wrap.html(this.$innerEl); 
 

 
    // then replace the view el. 
 
    this.setElement($wrap); 
 
    return this; 
 
    } 
 
}); 
 

 
var Parent = Backbone.View.extend({ 
 
    el: '#app', 
 
    initialize: function() { 
 
    this.child = new Child(); 
 
    }, 
 
    render: function() { 
 
    this.$el.html(this.child.render().el); 
 
    return this; 
 
    } 
 
}); 
 

 
var parent = new Parent(); 
 
parent.render(); 
 
parent.render(); // make sure it's idempotent

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 

 
<div id="app"></div>

：

は、私は強く、子のdivをラップする必要性を再考示唆ますが、ここではバックボーンとそれを達成する方法ですラッピングはdivです。

Answer 2

これは、ビュー要素をラッパーとしてカスタマイズし、必要に応じてテンプレートに必要なクラス（現在のビュー要素）を追加することです。例：

var V = new Backbone.View.extend({ 
    className: 'check', 
    render: function(){} 
}); 

これにより、同じDOM構造になります。 View-attributesを使用して、必要に応じてビュー要素をカスタマイズできます。これにより、コードの保守性が向上し、将来的にバグが発生しにくくなります。私はハックする理由は見当たりません。