扩展视图时如何附加 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">?

不可能的话，这个也可以
我的视图 1 = <div class="MyView1" data-view="MyView1"
MyView2 = <div class="MyView1" data-view="MyView1" data-another-attrib="MyView2">

Answer 1

className 可以定义为函数并在运行时求值。来自 the Backbone docs:

Properties like tagName, id, className, el, and events may also be defined as a function, if you want to wait to define them until runtime.

因此您可以查找父 class 的 className 的结果并将新的 class 附加到它。确保使用 _.result 来评估父项的 className 以防它也是一个函数。

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

或者，您可以将两个 class 添加到 MyView2 的 className:

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

更新 - 来自评论。你也可以从 MyView1 中挖出 className：

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

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

How to append classNames/attributes when extending views

backbone.js

marionette