2015-10-15 54 views
0

我有一個形式在填充手機型號的新手機路由中。此模型與客戶端有歸屬關係。Emberjs - 模型掛鉤從屬於關係返回null

App.Router.map(function() { 
    this.resource("client", { path: "/client/:id" }, function(){ 
     this.resource("phone", function(){ 
      this.route("new-phone") 
     }) 
    }) 
}) 

App.Client = DS.Model.extend({ 
    name: DS.attr(), 
    phone: DS.belongsTo("Phone", { async: true }) 
}); 

App.Phone = DS.Model.extend({ 
    name: DS.attr(), 
    model: DS.attr(), 
    year: DS.attr() 
}); 

當我完成表單時,服務器的響應可以用新創建的記錄正確返回。

我從JSON驅動的API獲取數據。

所以我張貼到:

POST:/ API /客戶/ 1 /電話

我已經設置了過渡回到phone.index頁面(保存完成後) (應該)激發模型鉤子(GET請求:/ api/client/1/phone)並獲取(phones.index)頁面的新數據。但出於某種原因,我從Ember得到'data is null'錯誤。在出現此錯誤之前,它似乎甚至沒有提出請求。

如果我在Ember應用程序之外使用HTTP請求程序,則會顯示數據。

App.ClientRoute = Ember.Route.extend({ 
    model: function(){ 
     return this.store.find("client", 1) 
    } 
}); 

App.PhoneIndexRoute = Ember.Route.extend({ 
    model: function(){ 
     return this.modelFor("client").get("phone").then(function(data){ 
      //Reload to manually get new data 
      return data.reload(); 
     }); 
    } 
}) 

這是灰燼的版本,我使用的是:

DEBUG: Ember  : 1.8.1 
DEBUG: Ember Data : 1.0.0-beta.11 
DEBUG: Handlebars : 1.3.0 
DEBUG: jQuery  : 1.10.2 
+0

你在這條路上有什麼原因?這可以很容易地在客戶端/ 1路由中實現。 –

+0

或邏輯上客戶端=>/client/edit/1 =(action with form)=>/client/view/1 –

+0

@kristjanreinhold用戶單擊電話路徑中的按鈕以顯示錶單。我基本上使用{{link-to}}來訪問表單。 – Jetchy

回答

0

我不認爲你需要一個新的途徑,以示對對方的電話的形式。相反,做一個屬性當用戶單擊電話形式進行切換

比方說,您的模板看起來像這樣

/user/1.hbs

{{model.user_name}} {{model.first_name}} 

{{model.phone.number}} 

{{#if showPhoneForm}} 
    <div class="form"> 
      {{input value=model.phone.number placeholder="phone nr"}} 
    </div> 

    <div class="button" {{action "saveUser"}}> Save </button> // Save form data, hide user form, updaet user phone data 
{{else}} 
    <div class="button" {{action "makePhoneForm"}}> Add phone </button> // Create form for user 
{{/if}} 

控制器/用戶/

showPhoneForm: false, 
    actions: { 
     makePhoneForm: function() { 
      this.set('showPhoneForm', true); 
     }, 
     saveUser: function() { 
      this.get('model.phone').then(function(phoneRecord) { 
      phoneRecord.save().then(function(){ 
       this.set('showPhoneForm', false); 
      }.bind(this): 
     } 
    }