Question

我在Backbone.js中有一个模型，如下面的模型：

Attribute = Backbone.Model.extend({
    defaults: {
        label: '',
        values: {},
    },
});

有了这个观点：

AttributeView = Backbone.View.extend({
    tagName: 'button',
    className: 'btn',
    initialize: function(attribute) {
        this.attribute = attribute;
        this.render();
    },
    render: function() {
        var template = _.template($("#attribute-template").html(), {attribute: this.attribute});    
        this.$el.html(template);
    },
});

HTML模板：

<!----- attribute template ----->
<script type="text/template" id="attribute-template">
    <span class="attr">
        <%= attribute.get('label') %>
    </span>
    <span class="badge pull-right"></span>
</script>

它产生了这个：

<button label="..." values="[object Object],[object Object],..." class="btn">...</button>

我的问题是为什么backbonejs会将标签和值属性添加到html模板中，我该如何防止这种情况？

Answer 1

你很难选择名称属性来保存你的模型（为什么你将模型存储在自定义属性中也超出我的范围），因为Backbone.View.attributes是一个属性，它是用于指定要添加到视图el的HTML属性（这是<button>标记 - http://backbonejs.org/#View-attributes。

通常，您可以通过在模型属性中指定模型与视图的新实例来关联模型，如下所示，然后您可以将模型引用为this.model，如果需要只是数据this.model.toJSON()：

AttributeView = Backbone.View.extend({
    model: new Attribute(),
    tagName: 'button',
    className: 'btn',
    initialize: function() {
        this.render();
    },
    render: function() {
        var template = _.template($("#attribute-template").html(), this.model.toJSON());    
        this.$el.html(template);
    },
});

仅供参考，以下是正确使用属性属性的示例：

AttributeView = Backbone.View.extend({
    model: new Attribute(),
    tagName: 'button',
    className: 'btn',
    attributes: {
        'data-foobar': "I'm a custom data attribute"
    }
    initialize: function() {
        this.render();
    },
    render: function() {
        var template = _.template($("#attribute-template").html(), this.model.toJSON());    
        this.$el.html(template);
    },
});

然后会生成：

<button data-foobar="I'm a custom data attribute" class="btn">...</button>

Answer 2

原来我错误地初始化了视图。我直接传递了模型

var itemView = new ItemView(item)

相反，我需要将其声明为模型

var itemView = new ItemView({model: item})

也没有意识到该属性是一个View属性，所以我不得不重命名我的模型和视图。

Backbone.js不包含视图中的模型属性

2 个答案: