javascript - 如何在 Backbone 模型中设置属性

Question

我正在尝试使用主干来实现我的应用程序，但我可能有一些误解。

我想在使用某些默认值时指定某些属性(标题等)。但是自定义属性没有设置，为什么？

        var DataMapper = {
            Models: {},
            Collections: {},
            Views: {},
            Templates: {}
        };


        DataMapper.Views.OperatorView = Backbone.View.extend({
            el: "#op-panel",
            operators: [],
            events: {
                "click #concat-op-btn": "addConcatOp"
            },
            addConcatOp: function () {
                var concatOperator = new DataMapper.Models.OpContainerBox({title: "Concat", inputCount: 2, outputCount: 1});
                this.operators.push(concatOperator);
                concatOperator.drawContainer();
            }
        });


        DataMapper.Models.OpContainerBox = Backbone.Model.extend({
            title: "Operator",
            inputCount: 0,
            outputCount: 0,
            defaults: {
                x: 400,
                y: 40,
                leaves: [],
                height: 20,
                width: 120
            },
            drawContainer: function () {
                console.log(this.title); //outputs "Operator" not "Concat"
            }
        });
        new DataMapper.Views.OperatorView();

Answer 1

Backbone 模型属性与JavaScript对象属性不同。属性存储在attributes中属性(property)和您使用 get和 set与他们一起工作；属性附加到 this 并通过 this.property_name 直接访问。

当你这样说时:

DataMapper.Models.OpContainerBox = Backbone.Model.extend({
    title: "Operator"
});

title 将是一个属性，而不是一个属性。当你这样说时:

DataMapper.Models.OpContainerBox.new({
    title: 'Concat'
});

Backbone 会将 title 属性设置为 'Concat'。

如果您将 console.log 调用更改为:

console.log(this.title, this.get('title'));

您应该在控制台中看到 'Operator' 和 'Concat'。

所有默认值都应位于 defaults 中属性，如果任何默认值是可变的，那么您应该使用 defaults 函数来防止意外的引用共享:

DataMapper.Models.OpContainerBox = Backbone.Model.extend({
    defaults: function() {
        return {
            title: "Operator",
            inputCount: 0,
            outputCount: 0,
            x: 400,
            y: 40,
            leaves: [],
            height: 20,
            width: 120
        };
    },
    drawContainer: function () {
        console.log(this.get('title'));
    }
});

如果您不使用 defaults 函数，则所有 OpContainerBox 实例将通过其原型(prototype)共享完全相同的 defaults.leaves 数组.

您还需要确保使用 get 来访问属性:this.get('title') 而不是 this.title.

这个“通过原型(prototype)共享引用”问题也会导致您的 OperatorView 中的 operators 数组出现问题，因此您可能会这样说:

DataMapper.Views.OperatorView = Backbone.View.extend({
    el: "#op-panel",
    events: {
        "click #concat-op-btn": "addConcatOp"
    },
    initialize: function() {
        this.operators = [ ]; // <---- One distinct array per instance.
    },
    //...
});