如何在骨干模型中设置属性 [英] How to set attributes in backbone models

问题描述

我正在尝试使用主干来实现我的应用程序，但是我可能会被误解.

I'm trying to implement my app using backbone but I might have got something misunderstood.

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

I want to specify certain attributes(title etc.) while using certain default values. But the custom attributes are not set, why?

        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();

推荐答案

骨干模型属性与JavaScript对象 properties 不同.属性存储在 attributes 属性中，您可以使用 set 与他们合作；属性附加到this并通过this.property_name直接访问.

Backbone model attributes are not the same as JavaScript object properties. Attributes are stored in the attributes property and you use get and set to work with them; properties are attached to this and directly accessed via this.property_name.

当你这样说的时候:

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

title将是属性，而不是属性.当你这样说:

title will be a property, not an attribute. When you say this:

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

主干会将title属性设置为'Concat'.

如果您将console.log呼叫更改为:

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

您应该在控制台中同时看到'Operator'和'Concat'.

you should see both 'Operator' and 'Concat' in the console.

所有默认值都应放在 defaults 属性中，并且是否有任何默认值是可变的，则应使用defaults的函数来防止意外的参考共享:

All the defaults should go in the defaults property and if any of the defaults are mutable, then you should use a function for defaults to prevent accidental reference sharing:

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实例将通过其原型共享完全相同的defaults.leaves数组.

If you don't use a function for defaults then all OpContainerBox instances will share exactly the same defaults.leaves array through their prototype.

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

You'll also want to be sure to use get to access the attributes: this.get('title') not this.title.

此通过原型共享引用"问题也可能导致您在OperatorView中的operators数组出现问题，因此您可能要这样说:

This "reference sharing through the prototype" problem can also cause you problems with the operators array in your OperatorView so you might want to say this instead:

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

这篇关于如何在骨干模型中设置属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！