Question

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

我当前的实现通过使用Jquery＆＃39; s FooControls创建了一个简单的append视图。

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

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

我如何创建可在页面上多次使用的视图？

Answer 1

请尝试使用此功能（请参阅jsbin example）：

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);

骨干视图删除其他实例

1 个答案: