Question

我有一个JSON结构，我将其传入工具栏以尝试在EmberJS中进行动态分隔。它看起来像这样：

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

我在照片浏览器中使用它可以垂直和水平地转动照片。因为它应该是应用程序其他部分的可重用工具栏，所以我将它作为一个组件并将click事件挂钩到父控制器，以便它可以在点击时转动图片。我希望按钮也像其他示例中那样获得活动类，但我认为由于按钮的嵌入特性而无法正常工作。如何获取单击的按钮以获取活动类，以便我可以添加css？

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

感谢您的帮助。

模板

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

JS

App.UiToolbarComponent = App.Component.extend({
    actions: {
        clicked: function(context){
            console.log(context);
            this.sendAction("buttonClicked", context.action);

        }
    },
    didInsertElement: function(){
        if(this.get("draggable")) {
            this.$(".draggable").draggable({handle: ".draggable-handle"});
        }
    }
});

Answer 1

好像你走在了正确的轨道上。我认为您可以在按钮上设置活动属性属性，但是，您仍需要在任何其他按钮上设置清除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}}

积极点击EmberJS中的组件？

1 个答案: