主干视图删除其他实例

Backbone view removes other instances

本文关键字：其他 实例 删除 视图      更新时间：2023-09-26

在测试backbone.js时，我遇到了一个问题。如何创建一个可以在页面上多次使用的通用视图?

我目前的实现通过使用Jquery的append创建了一个简单的FooControls视图，用于其他两个。

然而，它最终只在最后一个视图中被使用并添加到DOM中。

JSBin，再现我的问题。http://jsbin.com/kopos/1/edit(红色方块代表FooControls视图，不应该有两个红色方块吗?)

我该如何创建一个可以在页面上多次使用的视图?

试试这个(参见jsbin示例):

var FooControls = Backbone.View.extend({
  className: 'foo-control'
});
var ScreenView = Backbone.View.extend({
  className: 'screen',
    render: function() {
        var fooOne = new FooControls();
        this.$el.append(fooOne.$el);
    }
});
var FileView = Backbone.View.extend({
  className: 'files',
    render: function() {
        var fooTwo = new FooControls();
        this.$el.append(fooTwo.$el);
    }
});
var screenInstance = new ScreenView();
var fileInstance = new FileView();
screenInstance.render();
fileInstance.render();
$('#wrapper').append(screenInstance.$el);
$('#wrapper').append(fileInstance.$el);

使用className可以获得您似乎正在寻找的相同功能，而不会出现渲染问题。

顺便说一下，我将按照以下方式开始优化/重构(其中一些只是个人偏好): 
var FooControls = Backbone.View.extend({
  className: 'foo-control'
});
var ScreenView = Backbone.View.extend({
  className: 'screen',
    render: function() {
        var fooOne = new FooControls();
        this.$el.append(fooOne.$el);
        return this;
    }
});
var FileView = Backbone.View.extend({
  className: 'files',
    render: function() {
        var fooTwo = new FooControls();
        this.$el.append(fooTwo.$el);
        return this;
    }
});
var screenInstance = new ScreenView(),
    fileInstance = new FileView();
$('#wrapper')
  .append(screenInstance.render().$el);
  .append(fileInstance.render().$el);
相关文章：