Question

我想在初始化视图时向Handlebar模板中的一个元素添加一个类。

这是我初始化LayoutView

的地方

export default LayoutView.extend({
  className: 'LandingPageHeaderDetail',
  template: fs.readFileSync(`${__dirname}/LandingPageHeaderDetail.hbs`, 'utf8'),
  initialize: function (options) {
     this.setMenu(options)    
   },
   setMenu (options) {
    // in here I want to add a className to one of the elements 
    // in the template file
   // for example template = <ul><li id="id1">dkjfls</li><li id="id2">kdjfkls</li>
   // if (options == id1) { add class x to element} else { add class to y element }
   }

我的问题是如何导航模板树，找到我正在寻找的元素并为其添加一个类。

我尝试过如下使用jQuery选择器：$（'＃id1'）但它返回null，可能是因为模板还没有渲染。有什么想法吗？

Answer 1

您可以使用Marionette的serializeData功能。

initialize: function(options){
    this.myOptions = options;
},
serializeData: function(){
    return {id: this.myOptions};
}

然后你可以使用这个问题的答案为Handlebars创建一个帮助器：Handlebars.js if block helper ==

然后在您的模板中，将实际逻辑应用于该类：

<ul>
    <li id="id1" {{#if_eq id "id1"}}class="classname"{{/if_eq}}>dkjfls</li>
    <li id="id2" {{#if_eq id "id2"}}class="classname"{{/if_eq}}>kdjfkls</li>
</ul>

Answer 2

正如您所说，您无法使用初始化函数内的模板导致模板尚未呈现。使用Render event，它在渲染视图后触发。

Marionette.View.extend({
  onRender: function(){
    // manipulate the `el` here. it's already
    // been rendered, and is full of the view's
    // HTML, ready to go.
    this.setMenu();

  },
  setMenu: function(){
    // now i can manipulate the template...
  }
});

其他解决方案是使用serializeModel或templateContext。

在初始化期间向Handlebar模板添加一个类

2 个答案: