Question

我在使用Backbone和RequireJS时遇到了问题。

BaseListView.js

＆＃13;

define(['backgrid',
  'backbone',
  'underscore', etc.], function (
    Backgrid,
    Backbone,
    _) {
  
  return Backbone.View.extend({
    initialize: function () {
      if(needDeleteCell) {
        this.addDeleteCell();
      }
      this.render();
    },

    addDeleteCell: function () {
      var ListViewDeleteCell = DeleteCell.extend({
        defaults: {
          successMsg: this.attributes.deleteSuccessMsg,
          failureMsg: this.attributes.deleteFailureMsg
        }
      });
      this.columns.push({
        name: "delete",
        label: "",
        editable: false,
        cell: ListViewDeleteCell
      }); 
    }
  });
});

＆＃13;

ChildView.js

＆＃13;

define(['i18next', './common/BaseListView'], function (i18n, BaseListView) {
  'use strict';

  return BaseListView.extend({
    columns: [{
      name: "_id",
      label: i18n.t('app.operationForm.id'),
      editable: false,
      cell: "string",
      renderable: false
    }, {
        name: "name",
        label: i18n.t('app.operationForm.nameLabel'),
        editable: false,
        cell: "string"
      }]
  });
});

＆＃13;

现在，如果我想使用子视图的多个实例，我有多个＆＃34;删除＆＃34; columns（由于BaseListView中的columns.push（）），如果父项的columns属性是单例实例。

在这种情况下，ChildView不是唯一扩展BaseListView

的类

使用Bacbkone + RequireJS进行此操作的正确方法是什么？

谢谢。

编辑：这是与Switching between singleton and prototype scope using RequireJS相同的问题，但我想避免出厂解决方案。

Answer 1

您的ChildView.columns是一个数组，并在实例之间共享。您可以从Backbone处理默认值哈希值和

的方式中汲取灵感

将columns定义为ChildView
通过设置BaseListView属性

columns

例如，

var ChildView = BaseListView.extend({
    columns: function() { // define `columns` as a function
        return [{
            name: "_id",
            // ...
        }, {
            name: "name",
            // ...
         }];
    }
});

和

var BaseListView = Backbone.View.extend({
    initialize: function () {
        this.columns = _.result(this, 'columns');
        this.addDeleteCell();
    },

    addDeleteCell: function () {
        this.columns.push({
            name: "delete",
            // ...
        }); 
    }
});

演示http://jsfiddle.net/nikoshr/9fk8axpk/1/

Answer 2

在您的情况下，ChildView.columns是原型范围。每个实例都具有相同的columns。

您可以在columns函数中初始化initialize：

define(['i18next', './common/BaseListView'], function (i18n, BaseListView) {
  'use strict';

  return BaseListView.extend({
    initialize: function () {
      this.columns = [{
        name: "_id",
        label: i18n.t('app.operationForm.id'),
        editable: false,
        cell: "string",
        renderable: false
      }, {
        name: "name",
        label: i18n.t('app.operationForm.nameLabel'),
        editable: false,
        cell: "string"
      }];
      BaseListView.prototype.initialize.call(this);
    });
  }
});

Backbone + RequireJS对象继承

2 个答案: