在 window 调整大小时更改 Backbone 视图模板

Question

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

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

当您导航到该页面时，这可以正常工作，但是当在 'resize' 上调用该函数时，它不会更新模板。

Answer 1

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

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

Answer 2

在你的ItemView中：

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

侦听 window 调整大小事件
限制渲染调用，因为调整大小事件的触发速度非常快
为渲染调用绑定 this 参考
调整大小时重新渲染视图；（渲染器将再次调用 getTemplate）
使用 onShow 事件，以便绑定仅在视图插入 DOM
清除 onClose 事件中的侦听器以防止以后出现错误，命名空间以防止与其他代码发生冲突。

在 window 调整大小时更改 Backbone 视图模板

Change Backbone view template on window resize

javascript

backbone.js

marionette