Ember.js和Foundation 4模式窗口

Question

我有兩個問題，Foundation Reveal和Ember.js。

首先，行動「關閉」不是射擊。我有任何想法爲什麼。

#application.js 
App.ModalView = Ember.View.extend({ 
    templateName: "modal", 
    title: "", 
    classNames: ["reveal-modal"], 
    didInsertElement: function() { 
     this.$().foundation('reveal', 'open'); 
    }, 
    actions: { 
     close: function() { 
      console.log('close action fired'); 
      this.destroy(); 
     } 
    }, 
}); 

App.ApplicationRoute = Ember.Route.extend({ 
    actions: { 
     showModal: function() { 
      var view = this.container.lookup('view:modal', {title:'Test title'}).append(); 
     } 
    } 
}); 

#index.html 

<script type="text/x-handlebars" data-template-name="test"> 
    <a {{action showModal}}>show modal</a> 
</script> 



    <script type="text/x-handlebars" data-template-name="modal"> 
     <h2> {{title}}</h2> 
     <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p> 
     <a class="close-reveal-modal" {{action close target="view"}}>&#215;</a> 
     <a {{action close target=view}}>Close</a> 
    </script> 

而第二個是，我不能來看一組屬性，同時增加這樣說：

App.ApplicationRoute = Ember.Route.extend({ 
    actions: { 
     showModal: function() { 
      var view = this.container.lookup('view:modal', {title:'Test title'}).append(); //not setting title 
     } 
    } 
}); 

對於第二個我不能在文檔中如何設置視圖參數發現，同時通過查找添加。

小提琴：http://jsfiddle.net/L4m6v/

Answer 1

我在github上創建了固定foundation.reveal.js上的項目： （我沒有找到修復jsbin上的foundation.js的方法）

我認爲使模態具有相同問題的其他庫，所以如果你使用jquery-ui，你也可以修復它。

https://github.com/xjok3rx/ember-modal

Answer 2

灰燼不成立的管道，當你創建這樣一個觀點。您可以構建一個居住在應用程序上的彈出窗口（該窗口很容易從應用程序中的任何位置（controllerFor（'application'））從路徑進行編輯和操作，或者需要：['application']和this.get從控制器（「controllers.application」））。

這裏有一個簡單的JSBin顯示這（我沒花多少時間就使得它漂亮，CSS是不是真的我的強項反正）。

http://emberjs.jsbin.com/eGIZaxI/1/edit

App.ApplicationController = Ember.ObjectController.extend({ 
    title: "Popup Title", 
    description: "You should do something", 
    isVisible: true 
}); 

App.ApplicationRoute = Ember.Route.extend({ 
    model: function() { 
    return ['red', 'yellow', 'blue']; 
    }, 

    actions: { 

    hidePopup: function(){ 
     $(".popup").fadeOut(); 
     this.controllerFor('application').set('isVisible', false); 
    }, 

    showPopup: function(){ 
     $(".popup").fadeIn(); 
     this.controllerFor('application').set('isVisible', true); 
    } 
    } 
});