在窗口调整大小时更改骨干视图模板

Question

我想更改窗口调整大小视图的模板，以使其响应。 重新加载页面时此方法工作正常，但我无法动态更新模板。 根据文档，我使用它来设置页面加载时的模板：

getTemplate: function() {
    if ($(window).width() > 1024){
        this.desktopLayout = true;
        return '#MenuView';
    } else {
        this.desktopLayout = false;
        return '#MenuViewTablet';
    }
},

当您导航到页面时，此方法工作正常，但是在“调整大小”上调用该函数时，它不会更新模板。

Answer 1

最终的答案是使用Backbone的listenTo函数来监听窗口调整大小事件 ，在该事件回调中进行更改，然后确保调用render来重新渲染视图 。

使用Backbone更改应用程序的HTML结构时，最关键的步骤和最常见的错误 是不调用render 。 如果在骨干网顶部使用“木偶”之类的东西，则在某些情况下，进行此类更改时，视图将自动重新呈现。

Answer 2

在您的ItemView ：

onShow : function () {
  $(window).on("resize.myNamespace", _.throttle(_.bind(this.render, this), 50));
},
onClose : function () {
  $(window).off("resize.myNamespace");
}

• 监听窗口调整大小事件
• 油门渲染调用，因为调整大小事件触发得非常快
• 绑定this引用以进行渲染调用
• 重新渲染视图以调整大小； （渲染器将再次调用getTemplate ）
• 使用onShow事件，以便仅在将视图插入DOM后进行绑定
• 在onClose事件中清除侦听器以防止以后出错，在名称空间中清除侦听器以防止与其他代码冲突。