如何在Ember中更改模板时运行JQuery代码

How to run JQuery code when changing templates in Ember?

本文关键字:运行 JQuery 代码 Ember      更新时间:2024-01-14

在我的项目中,我想要一些代码:

 $("#panelAccommodation").hide();
 $("#panelFlight").hide();

以在更改模板时运行。我想要的是,当用户更改到他们所在的模板时,这些面板的id(如上所示)将被隐藏。它们应该只在单击时显示,但这部分代码已经在控制器上完成了操作。有什么想法吗?

编辑:

我真的很抱歉,我似乎被误解了,这是我的错,因为我没有具体说明,当我说点击时,我指的不是按钮,而是RadioButtonList上的一个选项。

与其隐藏和显示div,我建议研究将模板渲染到命名出口中,并使用{{action}}助手发送操作。有关在此处渲染和在此处发送操作的更多详细信息。

因此,假设您有一条索引路线,并希望显示住宿和航班。

// app/routes/application.js
actions: {
  showAccommodationPanel: function() {
    this.render('accomodations', {
      into: "application",
      outlet: "accomodations"
    });
  },
  removeAccomodationPanel: function() {
    this.disconnectOutlet({
      outlet: "accomodations",
      parentView: "application"
    });
  }
}

你有一个住宿模板:

// app/templates/accomodations.hbs
<panel id="panelAccomodation">
  <h1>
    All you awesome panel markup here
  </h1>
  <button {{action "removeAccommodationPanel"}}>Close</button>
</panel>

然后你的主模板:

// app/templates/application.hbs
{{outlet}}
{{outlet "accomodations"}}
<button {{action "showAccommodationPanel"}}>Show accomodations</button>