Emberjs - 模型钩子从BelongsTo关系返回null

时间:2015-10-15 10:51:13

标签: javascript ember.js

我在新手机路线中有一个填写手机型号的表格。此模型与客户端具有belongsTo关系。

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 / client / 1 / phone

我已设置转换回到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();
        });
    }
})

这是我正在使用的Ember版本:

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

1 个答案:

答案 0 :(得分: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): 
        }
     }