javascript - Backbone.js 在获取返回值后呈现 View

Question

在下面的代码中，只有在我从 Gmaps 导航器上的调用中获得 valuea 后，我才需要渲染 View 。 在我拥有 Latitude amd Longitude 之前，我无法渲染 View 。 按照这里的一些答案我被错误困住了

对象 [object global] 没有方法 'afterRender 感谢您的任何建议。

initialize: function() {
    $.when(this.beforeRender).then(function(){
        this.afterRender();
    });
},

beforeRender: function () {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.onSuccessUpdatePos, 
                                                 this.onFailUpdatePos);
    } else {navigator.geolocation.getCurrentPosition(this.onSuccessUpdatePos, 
                                                     this.onFailUpdatePos);

    }
},

afterRender: function () {
    this.render();
},

更新:我照我说的做了，似乎遵循了 BeforeRender-> render-> afterRender 的顺序。 我还在函数 Initialize() 中添加了所有初始化逻辑。 问题是将函数按顺序排列似乎不能确保一旦获得结果就启动函数 render()。

我也试过

    $.when(this.beforeRender).then(that.render);

正如向我建议的那样，但仍然不断给我错误。似乎 beforeRender 没有启动。不断向我显示的错误是

未捕获的语法错误:意外的标记 u

我认为发生这种情况是因为 sessionStorage 和 localStorage 并且在启动渲染功能之前没有填充它们。 有没有一种有效的方法来等待这些结果被返回？

Answer 1

我认为您遵循了一些教程，因为 beforeRender 和 afterRender 都不存在于 Backbone 核心中。但是，它们通常由需要在渲染例程前后触发事件的人实现。

此外，Backbone 将 View 类的渲染函数留空，因此您可以在需要时自行实现(甚至调用)。

作为旁注，将 render() 直接调用到 initialize() 函数中通常不好，因为在初始化 View 后，您通常需要更好地控制何时以及如何呈现 View 。

也就是说，我建议:

• 将所有初始化逻辑(比如导航器检查)移到 initialize() 中；
• 在 View 外调用 render()(在调用新的 ViewName() 之后)

如果你真的需要(可能是为了进一步开发你的代码)before 和 after 回调，你可以使用 Underscore(可用，因为它是一个依赖项)“wrap “功能。 这种方法包括:

initialize: function() 
    this.render = _.wrap(this.render, function(render) {
        this.beforeRender();
        render();                       
        this.afterRender();
    });

}, 
render: function() {},
beforeRender: function() {},
afterRender: function() {}

考虑到这一点，我会选择(记得在 View 类上指定一个 onFailUpdatePos):

initialize: function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.render, this.onFailUpdatePos);
    } else {
        navigator.geolocation.getCurrentPosition(this.render, this.onFailUpdatePos);
    }
}