ember.js - 为什么新创建的记录不会出现在列表中？

Question

我有一个创建记录的表单，然后转换到特定对象的资源列表。但是，一旦创建记录，它就不会反映在资源列表中。如果我刷新页面，记录将保存在正确的位置。我安装了 ember chrome 扩展，如果我在资源下查看，那么资源就在那里指向正确的徽章。但是如果我先去徽章，然后寻找资源，它没有列出。有任何想法吗？我很乐意提供更多必要的信息来澄清。先感谢您

创建资源表单控制器和路由

控制器

    App.ResourcesCreateController = Ember.ObjectController.extend({
  resourceTypes: ["link","file","video"],
  needs: ['badge','resourcesIndex'],

  actions: {
    save: function() {

      //Gather the info from the form
      var description = this.get('description');
      var url = this.get('url');
      var type = this.get('type');
      var text = this.get('text');
      var badge = this.get('controllers.badge').get('model');

      //set the data to the model of the route (ResourceCreateRoute)
      var resource = this.get('model');
      console.log(resource);
      resource.set('description',description);
      resource.set('url',url);
      resource.set('type',type);
      resource.set('text',text);
      resource.set('badge',badge);

      var self = this;

      //save the route
      var a = resource.save().then(function() {

        //if success
        //this.get('store').reload();
        console.log('%c that resource saved rather nicely','color:green;');

        self.transitionToRoute('resources.index',self.badge);

      }, function() {

        //if failure
        console.log('%c Yea boss...that didnt go so hot', 'color:red;');
        self.set('isError',true);
      });

    },
    reset: function() {
      this.transitionToRoute('resources.index');
    }
  }


});

路线

App.ResourcesCreateRoute = Ember.Route.extend({
    model: function() {
        return this.store.createRecord('resource');
    }
})

列出资源路线

App.ResourcesRoute = Ember.Route.extend({
    model: function(){
        return this.modelFor('badge').get('resources');
    }
});

---

楷模

资源模型

App.Resource = DS.Model.extend({
    'badge': DS.belongsTo('badge'),
    'text': attr('string'),
    'url': attr('string'),
    'description': attr('string'),
    'type': attr('string')
});

徽章模型

App.Badge = DS.Model.extend({
    'category': DS.belongsTo('category'),
    'title': attr('string'),
    'type': attr('string'),
    'ord': attr('number'),
    'short_description': attr('string'),
    'full_description': attr('string'),
    'mentor': DS.belongsTo('employee'),
    'parent':DS.belongsTo('badge'),
    'icon': attr('string'),
    'required': attr('boolean'),
    'signoff_role': attr('string'),
    'created_at': attr('string'),
    'updated_at': attr('string'),
    'resources': DS.hasMany('resource', { async: true } ),
    'quiz': DS.belongsTo('quiz', { async: true } )
});

---

模板

资源清单

{{#link-to "resources.create" class="btn btn-primary btn-xs pull-right"}} Create Resource {{icon "plus"}}{{/link-to}}
<h3>Resources</h3>
<dl>
    {{#each  resource in controller}}
        {{render resources/resource resource}}
    {{else}}
        <p class="lead text-muted">There are no resources</p>
    {{/each}}
</dl>

资源项模板

{{#if isEditing}}
    <div {{bindAttr class="controller.isError:alert-danger:alert-info :alert"}}>
        <div class="row">
            <div class="col col-lg-2">
            <small>Type</small>
                {{view Ember.Select contentBinding="resourceTypes" classNames="form-control" valueBinding="type"}}
            </div>
            <div class="col col-lg-10">
                <small>Resource Name</small>
                {{input valueBinding="text" class="form-control"}}
            </div>

        </div>
        <div class="row">
            <div class="col col-lg-12">
            <br>
                <small>Description</small>
                {{textarea valueBinding="description" rows="5" class="form-control"}}
            </div>
        </div>
        <div class="row">
            <div class="col col-lg-12">
                <br>
                <small>URL,File Name, or Vimeo ID</small>
                {{input valueBinding="url" class="form-control"}}
            </div>
        </div>

        <hr>
        <div class="btn-group">
         <div {{action "save"}} class="btn btn-primary">{{icon "floppy-save"}} Save</div>
         {{#if confirmDelete}}
            <div {{action "delete"}} class="btn btn-danger">{{icon "trash"}} Are You sure?</div>
         {{else}}
            <div {{action "confirm"}} class="btn btn-danger">{{icon "trash"}} Delete</div>
         {{/if}}
         </div>

         <div {{action "reset"}} class="btn btn-default"> {{icon "ban-circle"}} Cancel</div>
    </div>

    {{else}}

    <div class="btn-group pull-right btn-group-xs">
        {{#if view.hover }}
        <div {{action "edit"}} class="btn btn-default">{{icon "cog"}}</div>
        {{/if}}
    </div>
    <dt>
        <span class="text-muted">{{resource_icon type}}</span> {{text}}
    </dt>
    {{#if description}}
    <dd class="text-muted"  style="margin-bottom:1em">
        {{markdown description}}
    </dd>
    {{/if}}
    <hr>
{{/if}}

创建资源模板

<h3>Create Resource</h3>
    <div class="row">
            <div class="col col-lg-2">
            <small>Type</small>
                {{view Ember.Select contentBinding="resourceTypes" classNames="form-control" valueBinding="type"}}
            </div>
            <div class="col col-lg-10">
                <small>Resource Name</small>
                {{input valueBinding="text" class="form-control"}}
            </div>

        </div>
        <div class="row">
            <div class="col col-lg-12">
            <br>
                <small>Description</small>
                {{textarea valueBinding="description" rows="5" class="form-control"}}
            </div>
        </div>
        <div class="row">
            <div class="col col-lg-12">
                <br>
                <small>URL,File Name, or Vimeo ID</small>
                {{input valueBinding="url" class="form-control"}}
            </div>
        </div>

        <hr>

         <div {{action "save"}} class="btn btn-primary">{{icon "floppy-save"}} Save</div>
         <div {{action "test"}} class="btn btn">Test</div>
         {{#link-to "resources.index" class="btn btn-default" }}  {{icon "ban-circle"}} Cancel {{/link-to}}
         <br><br>
    </div>

Answer 1

首先只是一些一般性说明。

1. 有了这么多代码，如果您提供 JSBin 或其他东西，每个人都会更轻松地帮助您。这对你来说有点额外的工作，但你是在寻求帮助，这对于精神上的解析和运行来说是很多的。就个人而言，这对我来说是一些额外的开销，因为你没有包括你的路由器，所以我不得不做一个 pass 只是为了弄清楚徽章和资源是如何相关的。

2. 当您使用带有输入助手的路由模型设置为新记录的 ObjectController 时，您不需要进行所有这些设置。这就是您在帮助程序上指定这些值绑定的原因。但是当你确实需要设置一堆属性时，你可以用类似的东西一次完成所有这些，record.setProperties({prop1: prop1Value, prop2: prop2Value ...});并为自己节省大量的打字时间。

3. 我不明白你为什么使用resourcesIndexResourcesCreateController 需要。要实际回答您的问题，可能会'resources'根据需要指定

然后使用类似的东西

resource.save().then(function(record){
  self.get("controllers.resources").pushObject(record);
  self.transitionToRoute("resources.index", badge); // I don't know if this makes any sense because you didn't show your router, but at the very least, don't use self.badge, or even self.get("badge"), because badge is already accessible in this scope.
}

Answer 2

很高兴看到您的模型定义，如果您有一个显示问题的 jsbin 设置，那就更好了。

您可以随时尝试将其连接到 createRecord。

 App.ResourcesCreateRoute = Ember.Route.extend({
    model: function() {
     return this.store.createRecord('resource', {badge: this.modelFor('badge')});
    }
 })

Answer 3

似乎当您创建新资源时，您并没有将其放入商店。你应该尝试类似this.store.createRecord(resource)then 而不是你的resource.save, 做一个this.store.commit.

我不完全确定我是对的。但这可能是一种可能性。

Answer 4

固定的。我不确定这是否是处理此问题的正确方法，但基本上，一旦创建并保存了子模型，就需要重新加载父模型。所以像这样

save: function() {
  var self = this;

  var resource = this.store.createRecord('resource',{
     property: 'property',
     relatedProperty: this.get('model'),
     //etc
  });

  resource.save().then(function(){
      self.get('model').reload();
  },function(){
     //do stuff because the resource didnt save
  });

}