在 Ember 中更改模板时如何 运行 JQuery 编码?
How to run JQuery code when changing templates in Ember?
在我的项目中,我想要一些代码:
$("#panelAccommodation").hide();
$("#panelFlight").hide();
更改模板时 到 运行。我想要的是当用户更改他们所在的模板时,这些面板具有隐藏的 id(如上所示)。它们应该只在单击时显示,但那部分代码已经通过控制器上的操作完成。关于如何做到这一点有什么想法吗?
编辑:
我真的很抱歉,我似乎被误解了,这是我的错,因为我没有指定它,当我说点击时,我不是指点击按钮,而是指 RadioButtonList 上的选项。
与其隐藏和显示 div,我建议研究将模板呈现到命名的插座中,并使用 {{action}} 助手发送动作。有关渲染的更多详细信息 here, and sending actions 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>
在我的项目中,我想要一些代码:
$("#panelAccommodation").hide();
$("#panelFlight").hide();
更改模板时 到 运行。我想要的是当用户更改他们所在的模板时,这些面板具有隐藏的 id(如上所示)。它们应该只在单击时显示,但那部分代码已经通过控制器上的操作完成。关于如何做到这一点有什么想法吗?
编辑:
我真的很抱歉,我似乎被误解了,这是我的错,因为我没有指定它,当我说点击时,我不是指点击按钮,而是指 RadioButtonList 上的选项。
与其隐藏和显示 div,我建议研究将模板呈现到命名的插座中,并使用 {{action}} 助手发送动作。有关渲染的更多详细信息 here, and sending actions 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>