扩展视图时如何附加classNames/attributes

Question

var MyView1 = Marionette.ItemView.extend({
   className: "MyView1",
   attributes: { 'data-view': 'MyView1' }
});


var MyView2 = MyView1.extend({
   className: "MyView2",
   attributes: { 'data-view': 'MyView2' }
});

MyView1是<div class="MyView1" data-view="MyView1">
MyView2<div class="MyView2" data-view="MyView2">

如何制作MyView2 =
<div class="MyView1 MyView2" data-xxx="MyView1" data-yyy="MyView2">？

如果不可能,这也没关系
MyView1 = <div class="MyView1" data-view="MyView1"
MyView2 = <div class="MyView1" data-view="MyView1" data-another-attrib="MyView2">

Answer 1

className可以定义为函数并在运行时进行评估.来自Backbone文档:

像tagName,id,className,el和events这样的属性也可以定义为函数,如果你想等到运行时再定义它们.

因此,您可以查找父类的结果className并将新类附加到其中.确保您使用它_.result来评估父类的className,因为它也是一个函数.

var MyView2 = MyView1.extend({
   className: function(){
       return _.result(MyView2.__super__, 'className') + " MyView2";
   },
   attributes: { 'data-view': 'MyView2' }
});

或者,您可以将这两个类添加到MyView2 className:

var MyView2 = MyView1.extend({
   className: "MyView1 MyView2",
   attributes: { 'data-view': 'MyView2' }
});

更新 - 来自评论.您也可以className从MyView1中挖掘出来:

var MyView2 = MyView1.extend({
   className: MyView1.prototype.className + " MyView2",
   attributes: { 'data-view': 'MyView2' }
});