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

以這種方式創建視圖時，Ember不會設置管道。

您可以構建一個駐留在應用程序上的彈出窗口（可以輕松地在應用程序中的任何位置進行編輯和操作（從路徑上的controllerFor（'application'），或者需要：['application']和this.get（'controllers。應用”）。

這是一個簡單的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);
    }
  }
});

Answer 2

我已經使用固定的foundation.reveal.js在github上創建了針對此問題的項目：（我沒有找到在jsbin上修復Foundation.js的方法）

我認為使模態化的其他庫也存在相同的問題，因此，如果您使用的是jquery-ui，則也可以對其進行修復。

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