初始化中可访问的属性在模板中不可访问？

Question

当实例化一个新视图时，我传入了一个模型。我可以在“初始化”属性中访问该模型，但是当我尝试将模型传递到模板时无法引用它。知道为什么吗？

var postView = Backbone.View.extend({

        initialize : function() {

           // returns model 
            console.log('the model we are interested in',this.model); 
            this.render();
        },

        el : "#blog-post",

        template : function() {

            // returns undefined
            var model = this.model;

            return _.template($('#postview').html(), {
                post : model
            });
        },

        render : function() {
            var self = this;
            this.$el.html(self.template);
        }

    });

我正在使用另一个视图中的方法对其进行实例化：

readMore : function(e, index) {
            var self = this;
            var newView = new postView({
                model : self.collection.models[index].toJSON()
            });

        }

Answer 1

你正在向this.$el.html传递一个函数：

this.$el.html(self.template);

这和说的一样：

var f = this.template;
this.$el.html(f);

那么html 在你传递一个函数时会做什么呢？嗯，来自fine manual：

.html(函数)

返回要设置的 HTML 内容的函数。接收索引 集合中元素的位置和旧的 HTML 值 论据。 jQuery 在调用函数之前清空元素；采用 oldhtml 参数引用以前的内容。内 函数，this 指的是集合中的当前元素。

当您传递 html 一个函数时，它会调用该函数，但 this 不会是您认为的那样，函数内部的 this 将是具有其 HTML 集的 DOM 元素。

我想你想自己调用this.template并将其返回值交给html：

this.$el.html(this.template());
// ------------------------^^

这样template 的视图就会像您期望的那样this。

Answer 2

最好的猜测是 this 不再涉及视图的上下文。如果你在函数中记录它会显示什么。

编辑- 实际上不确定这是否会产生预期的结果，我通常使用把手，但我认为 _.template 和 hanblebars 的设置非常相似。您的模板模板通常需要一个普通的 java 对象传递给它，否则您将不得不访问您想要的变量，例如 post.attributes.name，但是如果您只传递模型的 toJSON 版本，您可以在没有需要 post.attributes。

你也可以编译你的模板一次然后引用它，不需要把它作为一个函数，每次都从 DOM 中获取（假设它永远不会改变）。下面是我的意思的一个例子。在您的模板中，您将拥有 等来获取您的模型属性。 var postView = Backbone.View.extend({

        initialize : function() {

           // returns model 
            console.log('the model we are interested in',this.model); 
            this.render();
        },

        el : "#blog-post",

        template :  _.template($('#postview').html()),


        render : function() {

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

        }

    });

哦，惯例通常是渲染返回“this”，所以如果你想从其他地方调用它并将它附加到页面的新部分，你可以调用postView.render().el

Answer 3

您可能正在传递模型，但您的视图中没有收到它。试试：

initialize: function(model) { ...