Backbone 延长损坏

Question

这以前从未发生过，这让我有点恼火...但是如果我创建一个视图并尝试扩展它 extend isn't a function on a on appears like a valid instance of class.

var gv = Backbone.View.extend({
    //Stuff here
});

console.log(gv);
//child {cid: "view2", $el: jQuery.fn.init[1], el: div.shell, constructor: function, events: Object…}

gv.extend({
    //Stuff here
});
//Uncaught TypeError: gv.extend is not a function

我添加了一个工作示例。

$(document).ready(function() {
  var RN = {};

  RN.gvCreator = Backbone.View.extend({
    el: '.shell',
    render: function() {
      console.info('building stuff');
    }
  });
  //set up the global view for all menu items etc
  RN.gv = new RN.gvCreator();
  RN.gv.render();
  console.info(RN.gv);
  var indexView = RN.gv.extend({
    el: '.content',
    render: function() {
      console.info('working');
    }
  });

  Backbone.history.start();
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div class="shell"></div>

Answer 1

尝试使用下划线扩展视图的原型对象：

var View = Backbone.View.extend({
  foo: 1
});

console.log(View);

_.extend(View.prototype, {
  bar: 2
});

var aView = new View();

console.log(aView.foo);
console.log(aView.bar);

Answer 2

在您的示例中，您重新分配给 RN.gv。起初它是一个构造函数，但后来你用一个实例破坏了它。

一般来说，视图实例在创建后不能被扩展（至少不能用那个方法）。

您可以通过为构造函数和实例设置两个单独的变量来解决您的问题。请注意，在已经创建实例之后（重新）扩展构造函数只会影响未来的视图实例 - 它们不会追溯影响以前创建的视图实例。

编辑：针对下面的评论，新视图扩展应该如何完成：

  var indexView = RN.gvCreator.extend({
    el: '.content',
    render: function() {
      console.info('working');
    }
  });

这不会影响 RN.gv 的属性，因为它已经使用 RN.gvCreator 构造函数创建。（请注意 RN.gvCreator 未被上面的 extend 语句修改——相反，创建了一个使用 RN.gvCreator 作为其基础的新视图构造函数。）

Backbone 延长损坏

Backbone extend broken

javascript

backbone.js