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.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);
    }
  }
});

Answer 2

我已经使用固定的foundation.reveal.js在github上为这个问题创建了项目：（我没有找到在jsbin上修复foundation.js的方法）

我认为制作模态的其他库有同样的问题，所以如果你使用jquery-ui，你也可以解决它。

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

Ember.js和Foundation 4模态窗口

2 个答案: