Javascript 激活单击EmberJS中的组件？

我有一个JSON结构，我将它传递到一个工具栏中，以在EmberJS中尝试动态划分。看起来是这样的：

{
    draggable: true,
    buttons: [
      {label: "Portrait", action="vertical"},
      {label: "Landscape", action="horizontal"}
    ]
}

我在图片查看器中使用它，可以垂直和水平旋转照片。因为它应该是应用程序其他部分的一个可重用工具栏，所以我将其作为一个组件，并将click事件连接到父控制器，以便它在单击时打开图片。我希望button也像在其他示例中一样获得活动类，但我认为这不起作用，因为button的嵌入特性。我如何获取被点击的按钮来获取活动类，以便向其中添加css

当调用init时，我尝试在模型中的每个按钮对象中设置isActive属性，然后通过action函数将其设置为true，但我无法使用嵌套的数据结构获得可观测值。我是否必须使每个按钮成为一个单独的组件，或者我可以避免这种情况

谢谢你的帮助

模板

<script type="text/x-handlebars" data-template-name="photo-gallery">
    <div id="PictureApp"></div>
    {{#if toolbar}}
        {{ui-toolbar options=toolbar buttonClicked="changeOrientation"}}
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="components/ui-toolbar">
    {{title}}
    <div class="overlay">
        <div class="toolbar draggable">
            {{#if draggable}}
            <div class="header draggable-handle"></div>
            {{/if}}
            <ul>
                {{#each buttons}}
                    <li{{action "clicked" this}}>{{label}}</li>
                {{/each}}
            </ul>
        </div>
    </div>
</script>

---

看来你走对了方向。我认为您可以在按钮上设置活动属性，但是，您仍然需要在任何其他按钮上设置清除

active

标志

在单击的操作中：

   clicked: function(context){
     console.log(context);
     this.buttons.setEach('active', false);
     context.set('active', true)
     this.sendAction("buttonClicked", context.action);
   }

然后可以在模板上绑定类：

            {{#each buttons}}
                <li {{bind-attr class=active}} {{action "clicked" this}}>{{label}}</li>
            {{/each}}

{{#每个按钮}
{{label}
{{/每个}}

我喜欢setEach方法。谢谢

            {{#each buttons}}
                <li {{bind-attr class=active}} {{action "clicked" this}}>{{label}}</li>
            {{/each}}