Question

我正在使用ember js开发一个简单的CRUD应用程序。我有一个带有输入表单的模板，它将数据发送到服务器，服务器响应成功响应。

输入表格数据：“user”：{“id”：1，“name”：“John”};
服务器响应：{“message”：“创建成功”，“nextId”：2}。

我想在同一个模板上显示成功消息（一个带有输入表单）。因为模板是指用户模型，而用户模型没有消息属性。怎么做到呢？请帮忙。

这是我的代码：

var Manager = Ember.Application.create();

Manager.Router.map(function() {
   this.resource('users');
   this.resource('user', {path: '/users/:user_id'});
   this.resource('home', {path: '/'});
});


Manager.UserRoute = Ember.Route.extend({
   model: function(params) {
       return jQuery.getJSON("http://localhost:8085/users/"+ params.user_id);
   },

   actions :{
       insert : function(){
           var user = this.modelFor("User");
           $.ajax({
                url: "http://localhost:8085/Users", 
                data: JSON.stringify(user),
                type: "POST",
                contentType: "application/json",
           })
           .done(function(data){
            //set data.message to display on UI 
           })
       }
   }
});

我的模板如下所示：

<script type="text/x-handlebars" data-template-name="user">
<form class="form-horizontal" role="form" {{action "insert" on="submit"}}>
    <div class="form-group">
        <label for="userId" class="control-label col-xs-2">User Id</label>
            <div class="col-xs-4 input-group">
                {{input type="number" value=_id class="form-control" id="userId" placeholder="Identity"}}
            </div>
    </div>

    <div class="form-group">
        <label for="name" class="control-label col-xs-2">Name</label>
            <div class="col-xs-4 input-group">
                {{input type="text" value=name class="form-control" id="name" placeholder="Name"}}
            </div>
    </div>

    {{#if message}}
        <div class="alert alert-success input-group" role="alert">{{message}}</div>
    {{/if}} 

    <div class="form-group button-center">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>
</script>

Answer 1

将控制器上的message属性设置为返回的响应。

actions :{
       insert : function(){
           var user = this.modelFor("User");
           var self = this;
           $.ajax({
                url: "http://localhost:8085/Users", 
                data: JSON.stringify(user),
                type: "POST",
                contentType: "application/json",
           })
           .done(function(data){
               //set data.message to display on UI 
               self.controllerFor('user').set('message', data.message);
           })
       }
   }

在创建/更新操作后使用Ember中的响应更新模板

1 个答案: