Question

我需要帮助执行外部ember组件中定义的操作方法。（尽管ember遵循DATA Down和Actions Up方法）。我的用例如下

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

从组件内的控制器执行操作不建议使用。为什么模态会向控制器和路由器发送“保存”和“取消”操作。

Ember有sendAction，您可以使用它从组件向控制器或路由器发送动作。

在内部组件中，您可以定义类似此Ember 1.x

的操作

CREATE NONCLUSTERED INDEX [IX_Store_000_CreatedDate_Desc_Incl] ON [dbo].[Store_000] ([CreatedDate] DESC)
INCLUDE ([UserName],[ItemID],[Description],[CreatedDate],[CountryID])

您可以将其发送到路由器中的控制器

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

这将触发从组件到控制器的doSomething。在ember 2.x中你可以在这里查看它们，它们几乎相同

https://guides.emberjs.com/v2.6.0/components/handling-events#toc_sending-actions

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

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

控制器上有一个prop，它也有这个从控制器传递给组件的字段。你可以在模板里面说：

{{my-modal isOpen=isOpen}}

App Labs有一个关于如何与ember-cli集成的模态的很好的例子

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

如何在ember中从控制器或路由器执行组件的操作方法

1 个答案: