在窗口大小上更改Backbone视图模板

Question

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

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

当您导航到该页面时，此功能正常，但是当调用该功能时，调整大小＆＃39;，它不会更新模板。

Answer 1

这里的明确答案是使用Backbone的listenTo功能来收听窗口调整大小事件，在该事件回调中进行更改，然后< strong>确保调用渲染以重新渲染视图。

使用Backbone 更改应用程序的HTML结构时，最关键的步骤和最常见的错误不会调用render 。如果您在Backbone之上使用Marionette之类的东西，在某些情况下，您的视图将在进行此类更改时自动重新呈现。

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事件中的监听器以防止以后出现错误，命名空间以防止与其他代码发生冲突。