Question

在我的项目中，我想要一些代码：

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

在更改模板时运行。我想要的是这些面板，当用户更改其所在的模板时，会隐藏具有ID（如上所示）的面板。它们应该仅在单击时显示，但代码的那部分已经在控制器上执行了操作。关于如何做到这一点的任何想法？

编辑：

我真的很抱歉，似乎我被误解了，这是我的错，因为我没有指定它，当我说点击时我并不是指一个按钮，而是一个选项单选按钮列表。

Answer 1

我不建议隐藏和显示div，而是建议将模板渲染到命名的插座中，并使用{{action}}帮助器发送操作。有关呈现here和发送操作here的详细信息。

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

// 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>

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

1 个答案: