在EmberJS中基于模型渲染侧边栏

Question

我开始学习EmberJS，也许答案很简单，但经过一番研究，我仍然无法找到解决方案。在我的模型模板中，我有一些按钮（每个按钮用于不同的对象），点击后应该展开侧边栏及其详细信息。

我想要达到的是这样的：

有人能给我一些简单的旋律吗？

Answer 1

有两种方法可以达到这种效果。

Using controller's variable

{{#foreach model as |obj|}}
  <button onclick={{action (mut activeModel) obj}}>{{obj.name}}</button>
{{/foreach}}
<!--Somewhere later in template-->
{{#if activeModel}}
  <!--Code of overlay and sidebar, close button sets activeModel to undefined-->
{{/if}}

Using child (nested) route

父模板：

{{#foreach model as |obj|}}
  {{#link-to 'parentRoute.childRoute' obj tagName="button"}}
    {{obj.name}}
  {{/link-to}}
{{/foreach}}
<!--Somewhere later in template-->
{{outlet}}

子模板应包含叠加和侧边栏的代码，关闭按钮重定向回父路径

Answer 2

好吧，其中一个选项是您可以创建组件并将修改后的模型（使用onclick函数修改模型）作为该组件的数据传递。

例如，

我们只想说这是你的主要模板

<button onclick="changeSideBar()">click</button>
<div style="display:none; //render it in the left-half(using bootstrap models)">
     {{sidebar-component model=model.modified}}
</div>

在javascript代码（component.js）中，

function changeSideBar()
{
    var modified= ;//set as per your convienince by iterating actual models or by any means
    this.set('model.modified',modified);
    //make display of sidebar div "block"
}

sidebar-component是你的组件。按照您的意愿制作组件。

希望能帮助到你。

没有您的模板或代码，我无能为力。如果你提供一些你的作品会很棒。