Ember模态路由到错误的URL关闭

时间:2014-01-08 16:02:14

标签: jquery twitter-bootstrap ember.js

我有一个带有CRUD功能的users模型的ember应用程序。 CreateEdit模板都在twitter bootstrap模式中呈现。我的问题是,当我点击模式中的CancelSave Changes时,我希望应用返回users模板。相反,当我单击这些按钮中的任何一个时,模态消失但网址分别保留在/ users / create或/ users / edit。我试图改变路由如下,但它没有任何影响。我的模态是大量谷歌搜索的结果,并将来自不同示例的代码放在一起,因此我不确定close中的userEditView操作是否实际上做了什么。有人可以帮忙吗?

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

    }
});

我的模板:

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

我的控制器:

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

我的路线:

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

1 个答案:

答案 0 :(得分:1)

通过调用routestransitionTo("the_route"),可以通过调用controllers从ember transitionToRoute("the_route")调用到路径的转换。如果需要从余烬view转换,请在视图this.controller.transitionToRoute("users");内进行调用。

在下面的示例中,已经在create user中进行了一些调整以试验引导模式淡入/淡出,但通常会遵循您的代码样式来演示我认为您描述的内容。

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