ember modal dialog liquid fire

Question

私はemberを新しくしています。ページ間を移動するには液体の火を使用してください。しかし、私のemberモーダルへの移行を追加したいと思います。

このようにフェードインしたい - http://ember-animation.github.io/liquid-fire/#/modals（ページの下部を参照）。

マイコード： アプリ/テンプレート/コンポーネント/ハローmodal.hbs：

<div>{{salutation}} {{person}}!</div> 
<div>{{input value=message class="modal-input"}}</div> 
<button {{action "gotIt"}} class="done">Thanks</button> 
<button {{action "change"}} class="change">Change</button> 

アプリ/コンポーネント/ハローmodal.js：

export default Ember.Component.extend({ 
    classNames: ['hello-modal'], 
    actions: { 
    gotIt: function() { 
     this.sendAction('dismiss'); 
    }, 
    change: function() { 
     this.sendAction('changeSalutation'); 
    } 
    } 
}); 

ステップ3（することができますようにリンクの例を参照してください）： 'あなたのルータマップ内の任意のスコープでモーダルを呼び出して、アクションを接続してください：'

わかりません。しかし、私は私のカップケーキルータにこれを追加しました：

router.js

Router.map(function() { 

      this.route('device'); 
      this.route('cupcakes', function() { 
       this.modal('hello-modal', { 
       withParams: ['salutation', 'person'], 
       otherParams: { 
        modalMessage: "message" 
       }, 
       actions: { 
        changeSalutation: "changeSalutation" 
       } 
       });   

    }); 

cupcakes.hbs

{{#link-to (query-params salutation="Guten tag" person="Stef") tagName="button"}} 
    Try It 
{{/link-to}} 

コントローラ/ cupcakes.js：I

export default Ember.Controller.extend({ 
    queryParams: ['salutation', 'person'], 
    salutation: null, 
    person: null, 
    modalMessage: "bound text for modal", 
}); 

何も起こりませんcupcakes.hbsで「試してください」をクリックします。コンソールにエラーメッセージは表示されません。

Answer 1

templates/application.hbsファイルに{{liquid-modal}}を追加しましたか？

// templates/application.hbs 
{{outlet}} 
{{liquid-modal}} 

：

私application.hbsは、このようになります