Question

我现在因为升级到backbone.js 0.9.2而让我的骨干代码工作时遇到了很多问题。我遇到的一个问题是在窗口中重新设置一个变量。它工作得很好，如下面的0.5.3

中的精简代码

别介意this.namespace.blaaaa位基本上我只有一个命名空间包装器，它负责将对象放在命名空间中。我在这里的原因是为什么我无法从页面视图内的PageDisplay视图中访问myApp。看到myApp是一个窗口变量，我不应该直接调用它来访问它。

myApp.js

$(window).load(function() {
    myApp = new Page({ el: $("body"), scroll: $(window).scrollTop() });
})

Page.js

this.namespace.Page = Backbone.View.extend({
    initialize: function( ) {
        this.pageDisplay = new PageDisplay({ 
            el: $("#showBrowser")
        });
    }
});

PageDisplay.js

this.namespace.PageDisplay = Backbone.View.extend({
    initialize: function( ) {
        myApp.model.set("bla");
    }
});

Answer 1

我猜你的$(window).load()处理程序：

$(window).load(function() {
    myApp = new Page({ el: $("body"), scroll: $(window).scrollTop() });
})

会失败，因为调用时范围内没有Page，并且当您稍后尝试myApp时，undefined充其量只有myApp.model.set()。您在命名空间中定义Page：

this.namespace.Page = Backbone.View.extend({ /*...*/ });

并且由于this大概是window，因此您有namespace.Page但没有Page。在namespace.Page初始化函数中你会遇到同样的问题：

this.pageDisplay = new PageDisplay({ 
    el: $("#showBrowser")
});

您将namespace.PageDisplay但不会PageDisplay。

您应该引用namespace.Page和namespace.PageDisplay，而不仅仅是Page和PageDisplay。我还建议您在定义视图时删除this，这只会引起混淆并打开错误窗口。

Answer 2

我会把窗户视为一种观点，因为它就是它的样子。然后你有一个与窗口相同的行为，但不需要渲染方法（除非有人能想到一个？）。这样，您可以运行这些事件以留下窗口并返回，或调整整个窗口的大小。这是我做的：

var WindowView = Backbone.View.extend({
    "el": window,
    "events": {
        "resize": "onResize"
        "focus": "onFocus"
        "blur": "onBlur"
    },
    "onResize": function (ev) {

    },
    "onFocus": function (ev) {

    },
    "onBlur": function (ev) {

    }
});

然后你就像标准视图一样创建一个新视图。

引用具有骨干视图的窗口变量

2 个答案: