Question

我们正在使用Marionette.js，并希望我们可以根据窗口的大小调整切换布局的活动模板。但是，看起来getTemplate()函数仅在视图加载时调用一次。

在Marionette中加载布局后，有没有办法切换当前模板？我们有这个代码：

initialize: function() {
    //... other code
    this.windowWidth = 0;
    $(window).resize(this.resizeHandler);
},

getTemplate: function () {
    if (this.windowWidth <= 1050) {
      return "#small-screen-template"; 
    }
    return "#large-screen-template"; 
},

resizeHandler: function () {
    this.windowWidth = $(window).width();
}

Answer 1

这尚未经过全面测试，但您可以更改初始化方法以包含对“render”的调用。此外，您不应忘记清理事件处理程序。

基本上改变初始化为：

initialize: function(options) {
    //..
    this.windowWidth = 0;

    $(window).on("resize", this.resizeHandler);
    $(window).on("resize", this.render);       
}

并添加清理方法（来自牵线木偶的onClose）：

onClose: function() {
    $(window).off("resize", this.resizeHandler);
    $(window).off("resize", this.render);                
}

通过这样做：

调整屏幕大小时窗口宽度正确更新
之后调用另一个回调，它将重新呈现视图
当视图关闭时，窗体对象的回调被释放

应该在理论上工作，而不是通过任何方式进行测试

Marionette.js - 切换视图模板与事件处理程序

1 个答案: