CODEWITHSUNDEEP
jquerytwitter-bootstrapember.js
bookthief
bookthief

Reputation: 2461

Ember modal routing to wrong url on close

I have an ember application which has a users model with CRUD capabilities. The Create and Edit templates are both rendered in twitter bootstrap modals. My problem is, when I click on Cancel or Save Changes in the modal, I want the app to return to the users template. Instead when I click either of these buttons, the modal disappears but the url remains at /users/create or /users/edit respectively. I've tried to change the routing as below, but it has had no effect. My modals are the result of a lot of googling and putting together code from different examples, so I'm not sure if the close action in userEditView actually does anything. Can anyone help?

App.UserEditView = Ember.View.extend({
    templateName: "user/edit",
    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();

//This is where I've tried to change the routing

this.transitionToRoute('users');

    }
});

My template:

<script type = "text/x-handlebars" id = "user/edit">

<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">Edit User</h4>
      </div>
      <div class="modal-body">
<div class = "input-group">
  <h5>First Name</h5>
  {{input value=firstName}}

  <h5>Last Name</h5>
  {{input value=lastName}}

  <h5>Email</h5>
  {{input value=email}}


      </div>
      </div>
      <div class="modal-footer">

        <a {{action close target="view"}} href="#" class="btn btn-default">Cancel</a>
        <a {{action "save"}} class="btn btn-primary">Save changes</a>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->

</script>

My controller:

   App.UsersCreateController = Ember.ObjectController.extend({


      actions: {
        save: function(){
          console.log("this.get('model')", this.get('model'));

          // create a record and save it to the store
          var newUser = this.store.createRecord('user', this.get('model'));
          console.log("newUser", newUser);
          newUser.save();

          // redirects to the user itself
          this.transitionToRoute('user', newUser);
        }
      }
    });

And my route:

App.UsersCreateRoute = Ember.Route.extend({
  model: function(){
    // the model for this route is a new empty Ember.Object
    return Em.Object.create({});
  },

  renderTemplate: function(){
    this.render('user.create', {
      controller: 'usersCreate'
    });
  }
});

Upvotes: 0

Views: 454

Answers (1)

melc
melc

Reputation: 11671

Transition to a route can be called from ember routes by calling transitionTo("the_route") and controllers by calling transitionToRoute("the_route"). If it is required to transition from an ember view then call within the view this.controller.transitionToRoute("users");.

In the following example some tweaks have been made in create user to experiment with the bootstrap modal fade in/out, but generally your code style has been followed to demonstrate what i think you describe.

http://emberjs.jsbin.com/ASAPASU/1#/users

Upvotes: 1

Related Questions