Question

我正在学习骨干，我似乎对下面的渲染方法有问题。运行时，渲染始终返回undefined。请任何人都可以帮忙解决这个问题。

var Todo = Backbone.Model.extend({

            defaults : {
                status: 'true' , 
                description : 'Nothing'
            },
            toggleStatus: function() {

                if (this.get('status') === "completed")
                    this.set({
                        'status': 'completed'
                    });
                else
                    this.set({
                        'status': 'incompleted'
                    });
            }

        });

 // Simple View
        var simpleView = Backbone.View.extend({

            events: {
                'change input': 'toggleStatus'

            },

            initialize: function() {
                this.model.on('change', this.render, this);
            },

            toggleStatus: function() {
                this.model.toggleStatus();
            },

            template : _.template('<h3 class="<%= status %>">' +
                                  '<% if(status === "complete") print("checked") %>/>' +
                                  ' <%= description %></h3>'),
            render: function() {
                    console.log('render was called');
                $(this.el).html(this.template(this.model.toJSON()));
              // return this;

            }

        });
  var todonew =  new Todo(); 
  var newView = new simpleView({
            model: todonew
        });

Answer 1

您可能应该在模板的if语句中加上括号，这可能会在某些浏览器中造成麻烦。改变这个

'<% if(status === "complete") print("checked") %>/>' +

到这个

'<% if(status === "complete") {print("checked")} %>/>' +

然后，至少有三种不同的方式将内容呈现给您的页面。您需要为视图提供一个可以附加其内容的DOM元素。否则，它会将内容呈现为在内存中浮动的空<div>。您正在使用jQuery，这使得选择DOM元素变得容易。我将使用$('body').html()替换整个页面html，根据您的需要修改您的选择器。

选项1：在渲染函数中取消注释return this，并在最后修改此代码

var newView = new simpleView({
  model: todonew
});
$('body').html(newView.render().el);


$(this.el).html(this.template(this.model.toJSON()));

到这个

$('body').html(this.template(this.model.toJSON()));

选项2：在您创建视图时将要添加内容的元素发送到

  var newView = new simpleView({
    model: todonew,
    el: $('body') //or whatever selector you want
  });

选项3：在渲染功能中更改此行

$(this.el).html(this.template(this.model.toJSON()));

到这个

$('body').html(this.template(this.model.toJSON()));

同样，这会替换整个页面的HTML，使用其他选择器，或者使用.append()或其他方法，而不是.html()，具体取决于您的需求。

Answer 2

您需要设置el，这是this返回错误时脚本的问题。例如：尝试此操作：

var newView = new simpleView({
     model: todonew,
     el: $("#somediv") //put here a div or the element where you want to put your template
});

Answer 3

我写的时候遇到类似的问题：

$('#foo').append(bar.render().el);

我收到了这个错误：

Uncaught TypeError: Cannot read property 'el' of undefined

要解决此问题，我在return this;添加了render:function(){}。

  render: function() {
        // something else
        return this; // add this line
    }

参考：Backbone.js Docs

一个好的约定是在渲染结束时返回它以启用链式调用。

Backbone渲染在视图中返回undefined

3 个答案: