2

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/

4

2 回答 2

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);
    }
  }
});
于 2013-10-20T18:52:07.300 回答
0

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

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

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

于 2013-10-21T12:00:46.910 回答