如何向Marionette/Backbone组件传参实现.hbs模板条件渲染？

当然可以访问传入的参数啦！在Marionette/Backbone里传递自定义参数给.hbs模板并实现条件渲染完全没问题，我来给你一步步讲清楚怎么做：

当你创建视图实例的时候，直接把需要的参数放到options里就行，比如：

// 定义你的视图
const MyComponentView = Marionette.View.extend({
  template: require('./my-component-template.hbs')
});

// 实例化视图时传入自定义参数
const myView = new MyComponentView({
  shouldShowBanner: true,
  userType: 'premium'
});

Marionette有个templateContext方法，专门用来给模板提供上下文数据。你可以重写这个方法，把传入的参数加工后返回给模板，这样模板就能直接用这些属性了：

const MyComponentView = Marionette.View.extend({
  template: require('./my-component-template.hbs'),
  
  templateContext() {
    // 在这里把需要给模板的参数整理好返回
    return {
      showBanner: this.options.shouldShowBanner,
      isPremiumUser: this.options.userType === 'premium'
    };
  }
});

这种方式比直接用options更清晰，还能提前做一些逻辑处理，比如判断用户类型。

拿到上下文参数后，就可以用Handlebars的条件语法来控制元素显示了：

{{!-- 根据showBanner的值决定是否显示横幅 --}}
{{#if showBanner}}
  <div class="promo-banner">专属优惠活动！</div>
{{/if}}

{{!-- 根据用户类型显示不同内容 --}}
{{#if isPremiumUser}}
  <div class="premium-features">高级功能面板</div>
{{else}}
  <div class="basic-features">基础功能面板</div>
{{/if}}

如果你懒得写templateContext，也可以在模板里直接用options对象访问参数，但这样代码可读性会差一些，后期维护起来麻烦：

{{#if options.shouldShowBanner}}
  <p>参数为真时显示这段内容</p>
{{/if}}

总的来说，用templateContext是更规范的做法，能让你的代码逻辑更清晰，也方便后续扩展~

内容的提问来源于stack exchange，提问作者CuriousFellow