CODEWITHSUNDEEP
ember.jsmodal-dialogzurb-foundation
joker.odessa
joker.odessa

Reputation: 80

Ember.js and Foundation 4 modal window

I have two problems with Foundation Reveal and Ember.js.

First, action "close" is not firing. I have any ideas why. 

#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>

And the second is that i cant set attributes of view while adding it this way:

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

For second i can't find in documentation how i can set view parameters while adding via lookup.

Fiddle: http://jsfiddle.net/L4m6v/

Upvotes: 2

Views: 948

Answers (2)

joker.odessa
joker.odessa

Reputation: 80

I've created project on github for this problem with fixed foundation.reveal.js: (i didnt find the way to fix foundation.js on jsbin)

I think other libs that making modal have the same problem, so if you'are using jquery-ui you may fix it too.

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

Upvotes: 0

Kingpin2k
Kingpin2k

Reputation: 47367

Ember doesn't set up the plumbing when you create a view in this manner.

You can build a popup that lives on the application (which is easy to edit and manipulate from anywhere within the application (controllerFor('application') from a route, or needs:['application'] and this.get('controllers.application') from controllers).

Here's a simple JSBin showing this (I didn't spend much time on making it pretty, CSS isn't really a strong suit of mine anyway).

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

Upvotes: 1

Related Questions