如何执行控制器或路由器中的组件的动作方法

Question

我需要帮助执行行动方法从外部定义在成员组件。(即使ember遵循数据下降和行动向上的方法)。我的用法如下

Application Template

    <script type="text/x-handlebars-template" data-template-name="application">
       <h2> Dialog Component </h2>
       {{outlet}}
    </script>

Index Template
    <script type="text/x-handlebars-template" data-template-name="index">
        <button {{action "showDialog1"}}>Open Dialog 1</button>
        <button {{action "showDialog2"}}>Open Dialog 2</button>
        {{#if openFirst}}
           {{#modal-dialog  name="dlg1" title="Modal 1" auto-open="true" onOpen=(action "handleDialogOpen" "dlg1") }} Content of the Dialog ...{{/modal-dialog}}
        {{/if}}

        {{#modal-dialog name="dlg2" title="Modal 2" onOpen=(action "handleDialogOpen" "dlg2")}} Content of the dialog ... {{/modal-dialog}}
    </script>

Modal Dialog Template
    <script type="text/x-handlebars-template" data-template-name="components/modal-dialog">
        <div class="titlebar-title">
           <span> {{title}} </span>
           <a class="closeBtn" {{action "close"}}>X</a>
        </div>
        <div class="content">
         {{yield}}
        </div>
    </script>

Index Controller

App.IndexController = Ember.Controller.extend({
      openFirst : false,
      actions : {
         showDialog1 : function(){
            this.toggleProperty("openFirst");  // open and close the first dialog when clicking the button.
         },
         showDialog2 : function(){
            // want to trigger "open" action of modal-dialog component without using any conditionals(if-else) and without observing "auto-open" attribute
            ......

         },
         handleDialogOpen : function(dialogName){
            if(dialogName === "dlg1"){
               // do something.
            }else if(dialogName === "dlg2"){
               // do something
            }
         }
      }
});

Modal Dialog Component

App.ModalDialogComponent = Ember.Component.extend({
        tagName : 'div',
        classNames : ['ui-dialog'],
        attributeNames : ['title','name','auto-open'],
        didInsertElement : function(){
             if(this.get("auto-open")){
                this.send("open");
             }
        },
        actions : {
              open : function(){
                 $(this.element).show();
                 this.onOpen()
              },
              close : function(){
                  $(this.element).hide();
              }
        }
});

Css Style Definition

ui-dialog{
  display : none;
}

有办法做到这一点吗？请指引我。

Answer 1

从组件内部的控制器执行操作--它不推荐使用。为什么您的模式发送保存和取消动作到控制器和路由器代替。

成员有sendAction，您使用它发送动作从组件到控制器或路由器。

在组件内部，您可以定义一个类似Ember 1.x的操作

{{my-component action="doSomething"}}

可以发送到路由器中的控制器。

MyComponent = Ember.Component.extend({
  click: function() {
   this.sendAction();
  }
});

这将触发从组件到控制器的doSomething。在余烬2.x中，您可以在这里检查它们，它们几乎是一样的。

sending-actions

让我们说，你想打开模式。在组件内部，您将定义一个名为isOpen的属性，该属性将显示隐藏模式内容

{{my-modal isOpen=isOpen}}

有一个道具控制器，它也有这个字段，您可以从控制器传递到组件。在模板中，您可以说：

{{#if isOpen}}
  {{my-modal ....this will trigger didInertElement on component that you can use to handle backdrop ...etc
{{/if}}

App实验室有一个很好的例子，说明了如何实现与ember集成的modals。

https://github.com/yapplabs/ember-modal-dialog