javascript - Backbone.js 设置 View 属性

Question

我是 Backbone 的新手，我很难理解如何设置 View 的属性。我正在使用没有模型的 View 。

这是 View :

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() 。不起作用。甚至不调用渲染函数。为什么？

Answer 1

几件事:

• set 不是主干 View 的函数。 Check the API
• 在您的注释代码中，调用 new OperationErrorView(...) 不会自动调用 render 函数。您必须手动执行此操作。
• View 的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 });
    });
}