Backbone.js 在获取返回值后渲染视图答案

【问题标题】：Backbone.js render a view after a getting return valueBackbone.js 在获取返回值后渲染视图
【发布时间】：2013-05-14 11:03:22
【问题描述】：

在下面的代码中，只有在从 Gmaps 导航器上的调用中获得 valuea 后，我才需要渲染视图。在我拥有纬度和经度之前，我无法渲染视图。在这里关注一些答案，我遇到了错误

Object [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 没有启动。一直显示的错误是

Uncaught SyntaxError: Unexpected token u

我认为这是由于 sessionStorage 和 localStorage 而发生的，并且在渲染功能启动之前这些都没有填充。有没有一种有效的方法可以等待这些结果返回？

【问题讨论】：

你试过$.when(this.beforeRender).then(this.afterRender);

标签： javascript jquery backbone.js jquery-deferred .when

【解决方案1】：

这个是out of context inside then

试试这个。在调用它之前保存 this 的引用。

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

【讨论】：

【解决方案2】：

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

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

作为旁注，通常在 initialize() 函数中直接调用 render() 并不好，因为在初始化视图后，您通常需要更多地控制何时以及如何渲染视图。

也就是说，我建议：

将所有初始化逻辑（如导航器检查）移入 initialize();
在视图外调用 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);
    }
}

【讨论】：