2015-02-09 89 views
0

我正在使用ember js製作一個簡單的CRUD應用程序。我有一個輸入表單的模板,它將數據發送到服務器,服務器響應成功響應。輸入表單數據:「user」:{「id」:1,「name」:「John」};
服務器響應:{「message」:「創建成功」,「nextId」:2}。在創建/更新操作後使用Ember中的響應更新模板

我想在同一模板上顯示成功消息(一個帶有輸入表單)。由於模板是指用戶模型,用戶模型沒有消息屬性。如何做呢?請幫忙。

這裏是我的代碼:

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

你能否提供更多的代碼?模板,控制器等? – 2015-02-09 15:19:33

+0

@Oren,我添加了我的模板和js。 – ans7991 2015-02-09 17:19:33

回答

0

設置你的控制器,該回來的響應上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); 
      }) 
     } 
    } 
+0

感謝您的回覆。我試過這個,但是這在用戶模型中添加了一個屬性「消息」,這是我不想要的。 – ans7991 2015-02-09 17:58:57

+0

@jcena - 這是在用戶控制器上設置消息屬性,而不是用戶模型。您的模板綁定到控制器上的屬性。現在,ember的工作方式是,如果控制器不包含具有相同名稱的屬性,則控制器將在模型上代理屬性。當您使用我發佈的實現時,行爲是否與預期的一樣? – 2015-02-09 18:55:49