Question

我在使用Backbone.js的strut 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上添加了类，但是我无法将html包装在父div中。

Answer 1

Backbone视图表示一个DOM元素，可以使用view.el访问。

通常，父视图在将其元素放入DOM之前呈现子视图。因此，子视图使用div包装自己，但父级仍然使用view.el来获取原始元素。

虽然我强烈建议重新考虑包装子div的必要性，但这是使用Backbone实现它的方法：

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。

Answer 2

正确的方法是将视图元素自定义为包装器，并根据需要向模板添加具有必需类（当前视图元素）的子<div>。例如：

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

这将导致相同的DOM结构。您可以使用View-attributes自定义视图元素。这将使代码更易于维护，并且将来不易出现错误。我没有理由去乱砍。

如何使用div包装Backbone视图元素

2 个答案: