如何使用backbone.js 的多态性，尤其是super 的属性？

Question

我正在尝试创建超类（MyShape）和子类（MyTriangle，MyRectangle）。我已经搜索了一些backbone.js 的多态性概念......但不知道这个问题。

我有一个如下所示的 .json 文件

[
{
    "type": "rect",
    "x": 10,
    "y": 10,
    "w": 100,
    "h": 100,
    "color": "red"
},
{
    "type": "arc",
    "x": 210,
    "y": 20,
    "w": 200,
    "h": 150,
    "color": "blue"
}
]

我使用backbone.js制作了继承结构，如下所示。

    var MyShape = Backbone.Model.extend({
        defaults : {
            color : '',
            src : '',
        }
    });

    var MyRectangle = MyShape.extend({
        defaults : {
            x : 0,
            y : 0
        }
    });

    var MyTriangle = MyShape.extend({
        defaults : {
            x : -10,
            y : -10
        }
    });

    var Collection = Backbone.Collection.extend({
        model : MyShape,
    });

如上所示，超类（MyShape）具有 color 和 src 属性。因为这个，我有一个问题。如果我创建 MyTriangle 实例，我认为我不能在该对象上使用 src 或颜色属性。

Q.如果我想编写如下代码（此示例是基于 Java 的），我应该如何编写代码？

    MyShape myShape = null;
    if (type.equals("rect")) {
        myShape = new MyRectangle(x, y, w, h);
    } else if (type.equals("arc")) {
        myShape = new MyArc(x, y, w, h);
    } else if (type.equals("triangle")) {
        myShape = new MyTriangle(x, y, w, h);
    } else {
        return null;
    }


    // option - src or color
    if (jsonObject.has("src")) {
        myShape.setImg(jsonObject.get("src").toString());
    } else if (jsonObject.has("color")) {
        myShape.setColor(jsonObject.get("color").toString);
    } else {
        return null;
    }

我必须维护这个结构（MyShape、MyTriangle、MyRectangle）。

非常感谢您的帮助。

Answer 1

要使用父类中的default，您需要扩展父类的默认值。

所以，例如 (source)

var MyRectangle = defaults : _.extend({}, MyShape.prototype.defaults, {
        x : 0,
        y : 0
     })
});

在主干集合中使用多态模型（source，similar question）

集合还可以包含多态模型，方法是使用返回模型的构造函数覆盖此属性。

var Library = Backbone.Collection.extend({

   model: function(attrs, options) {
     if (condition) {
      return new PublicDocument(attrs, options);
    } else {
    return new PrivateDocument(attrs, options);
    }
  }
});

example 将所有内容放在一起