CODEWITHSUNDEEP
javascripttwitter-bootstrapember.js
bookthief
bookthief

Reputation: 2461

Modal error in ember.js

I'm trying to get a modal to work with my ember application based on the example in this fiddle: http://jsfiddle.net/marciojunior/tK3rX/

However, the modal doesn't open and I am getting this error in my console:

Uncaught Error: Nothing handled the action 'showModal'.

Can anybody spot why? Here's my ModalView:

App.ModalView = Ember.View.extend({
    templateName: "modal",
    title: "",
    content: "",
    classNames: ["modal", "fade", "hide"],
    didInsertElement: function() {
        this.$().modal("show");
        this.$().one("hidden", this._viewDidHide);
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        if (!this.isDestroyed) {
            this.destroy();
        }
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

And my subjectRoute which is supposed to handle the showModal event:

App.SubjectRoute = Ember.Route.extend({
  model: function(params) { 
    return this.store.find('subject', params.subject_id);
  }

    events: {
        showModal: function() {
            App.ModalView.create({ title: "Edit Subject", content: "My content" }).append();
        }
    }

});

This is my Subject template from within which I want to be able to open the modal (This is just to test if I can get it working, eventually the modal will be called from the edit button):

<script type = "text/x-handlebars" id = "subject">
{{#if deleteMode}}
<div class="confirm-box">
  <h4>Really?</h4>
  <button {{action "confirmDelete"}}> yes </button>
  <button {{action "cancelDelete"}}> no </button>
</div>
{{/if}}

<h2>{{name}}</h2>


<button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
{{outlet}}

<a {{action showModal}} href="#">Open modal</a>
</script>

And my Modal View:

<script type="text/x-handlebars" data-template-name="modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>{{view.title}}</h3>
    </div>
    <div class="modal-body">
        <p>{{view.content}}</p>
    </div>
    <div class="modal-footer">
        <a {{action close target="view"}} href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</script>

Thanks.

Upvotes: 2

Views: 808

Answers (1)

melc
melc

Reputation: 11671

I updated the markup to reflect bootstrap v3.x and removed the hide value from the classNames array of ModalView.

http://emberjs.jsbin.com/IZavuVUM/2#subject

http://emberjs.jsbin.com/IZavuVUM/2/edit

hbs

<script type="text/x-handlebars" data-template-name="modal">


  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{{view.title}}</h4>
      </div>
      <div class="modal-body">
        <p>{{view.content}}</p>
      </div>
      <div class="modal-footer">

        <a {{action close target="view"}} href="#" class="btn btn-default">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->


</script>

js

    App = Ember.Application.create();

App.Router.map(function() {
  this.route("subject");
});

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

App.ModalView = Ember.View.extend({
    templateName: "modal",
    title: "",
    content: "",
    classNames: ["modal", "fade"],
    didInsertElement: function() {
        this.$().modal("show");
        this.$().one("hidden", this._viewDidHide);
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        if (!this.isDestroyed) {
            this.destroy();
        }
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

App.SubjectRoute = Ember.Route.extend({
  model: function(params) { 
    return [];//this.store.find('subject', params.subject_id);
  },

    actions: {
        showModal: function() {
            App.ModalView.create({ title: "Edit Subject", content: "My content" }).append();
        }
    }

});

Upvotes: 1

Related Questions