基于EmberJS中的模型的渲染侧栏

Question

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

我想达到的目标是这样的：

有人可以给我一些简单的旋转吗？

Answer 1

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

使用控制器的变量

{{#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}}

使用儿童（嵌套）路线

父模板：

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

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

Answer 2

好吧，其中一种选择是您可以创建组件，并将修改后的模型（使用onclick函数修改模型）作为该组件的数据。< / p>

例如，

让我们说这是您的主模板

<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"
}

侧边栏组件是您的组件。根据您的意愿制作组件。

希望有帮助。

没有您的模板或代码，我无济于事。如果您提供一些作品，那就太好了。