javascript - Backbone View 属性返回未定义

Question

这是我的观点:

define(
    [
        "jquery"
    ,   "underscore"    
    ,   "backbone"
    ,   "eventView"
    ]
,   function($, _, Backbone, EventView) {
        "use strict";

        var TimelineView = Backbone.View.extend({
            tagName: 'div'
        ,   className: 'column'

        ,   _EventViews: {} // Cache event views for reuse

        ,   initialize: function() {
                this.collection.bind('add', this.add);
                this.collection.bind('reset', this.add);
            }

        ,   render: function() {
                return this;
            }

            // Listen for additions to collection and draw views
        ,   add: function(model) {
                var eventView = new EventView({
                    model: model
                });

                // Cache the event
                console.log(this._EventViews);
                this._EventViews[model.get('id')] = eventView;

                // Draw event
                eventView.render(); 
            }
        });

        return TimelineView
    }
);

如您所见，我将 _EventViews 属性设置为包含一个空对象。但是，当我调用 add() 函数时，console.log(this._EventViews) 返回未定义，并且以下语句失败。

谁能告诉我这是为什么？

Answer 1

问题是在add中，this不是你的TimelineView。有关 javascript 中上下文的说明，请参阅这篇文章:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

您可以通过几种不同的方式解决这个问题。这种情况最简单的方法是使用 bind 或 on 的第三个参数(这两个是相同的)。

initialize: function() {
            this.collection.on('add', this.add, this);
            this.collection.on('reset', this.add, this);
        }

或者使用listenTo代替。

initialize: function() {
            this.listenTo(this.collection, 'add', this.add);
            this.listenTo(this.collection, 'reset', this.add);
        }

此外，您的 _EventViews 缓存将由 TimelineView 的所有实例共享。如果这不是您想要的，请在 initialize 中创建它。

initialize: function() {
            this._EventViews = {};
            this.listenTo(this.collection, 'add', this.add);
            this.listenTo(this.collection, 'reset', this.add);
        }