Backbone.js 设置视图属性答案

【问题标题】：Backbone.js set View attributeBackbone.js 设置视图属性
【发布时间】：2015-02-09 04:13:24
【问题描述】：

我是 Backbone 的新手，我无法理解如何设置视图的属性。我正在使用没有模型的视图。

这是视图：

var OperationErrorView = Backbone.View.extend({
    attributes: {},
    render: function(){
        var html = "<h3>" + this.attributes.get("error") +"</h3>";
        $(this.el).html(html);
    }
})

后来：

if (errors.length > 0){
    errors.forEach(function(error){
        // var errorView = new OperationErrorView({attributes: {"error": error} });          Doesn't work
        var errorView = new OperationErrorView();
        errorView.set({attributes: {"error": error}})
        errorView.render()
        $("#formAdd_errors").append(errorView.$el.html());
    });
}

执行此操作的正确方法是什么？现在它不起作用：当我尝试未注释掉的方法时，它给了我错误TypeError: errorView.set is not a function，如果我尝试第一种方法，它只是不调用 render() 函数。

更新：

var OperationErrorView = Backbone.View.extend({
    attributes: {},
    initialize: function(attributes){
        this.attributes = attributes;
    },
    render: function(){
        var html = "<h3>" + this.attributes.get("error") +"</h3>";
        console.log("html");
        $(this.el).html(html);
    }
})

if (errors.length > 0){
        errors.forEach(function(error){
            console.log(error);
            var errorView = new OperationErrorView({"error": error});
            errorView.render()
            $("#formAdd_errors").append(errorView.$el.html());
        });
    }

我尝试在初始化函数中包含 this.render()。不工作。甚至不调用渲染函数。为什么？

【问题讨论】：

标签： javascript backbone.js

【解决方案1】：

几件事：

set 不是主干视图的功能。 Check the API
在您的注释代码中，调用new OperationErrorView(...) 不会自动调用render 函数。您必须手动执行此操作。
视图的attributes 属性没有get 方法。再次，Check the API

那么，你应该怎么做呢？

研究initialize a View with properties的不同方式。然后弄清楚如何在您的 View 控制的 HTML 上获取这些属性。

这里有一些帮助您入门

var OperationErrorView = Backbone.View.extend({
    tagName: 'h3',

    initialize: function(attributes) {
        this.attributes = attributes;
        this.render();
    },

    render: function(){
        // attach attributes to this.$el, or this.el, here

        // insert the element into the DOM
        $('#formAdd_errors').append(this.$el);
    }
});

// later in your code
if ( errors.length > 0 ) {
    errors.forEach(function(error) {
        new OperationErrorView({ error: error });
    });
}

【讨论】：

我知道调用 new View 不会自动调用 render()，这就是为什么我在下一行调用 render()。无论如何，感谢您的建议和链接。但是，它不起作用，它不调用渲染函数我不知道为什么。有任何想法吗？包含新代码的更新。
我没有测试过代码；更像是一个指导方针。我现在正在深入研究它。
感谢 chazsolo 我发现了错误：var html = "<h3>" + this.attributes.get("error") +"</h3>" 应该是 var html = "<h3>" + this.attributes.error +"</h3>"; 并且有效。
啊，我错过了！我正忙着在 jsfiddle 上为您提供工作副本，但似乎您找到了一种方法。很高兴我能帮上忙！
第四件事：视图定义中的attributes 附加到原型，因此它们将被所有实例共享。 initialize 中的分配停止共享，但 attributes: {} 仍然是个坏主意。

【解决方案2】：

感谢 chazsolo 的回答，所有信息都在那里。因此，我将编写有效的代码，以防万一有一天有人发现它有用：

var OperationErrorView = Backbone.View.extend({
    initialize: function(attributes){
        this.attributes = attributes;
    },
    render: function(){
        var html = "<h3>" + this.attributes.error +"</h3>";
        $(this.el).html(html);
    }
});

if (errors.length > 0){
    errors.forEach(function(error){
        var errorView = new OperationErrorView({'error':error});
        errorView.render()
        $("#formAdd_errors").append(errorView.$el.html());
    });
}

【讨论】：