Question

我正在尝试使用包含多个条目视图的嵌套条目视图来实现待办事项列表，该列表由待办事项视图组成。每个条目都可以删除，因此可以从容器视图中删除。

连接到我的Rails应用程序时，此几乎有效。单击删除按钮（或在控制台中触发App.ToDoEntry.find（x）.deleteRecord（））时，实例设置为isDirty = true，但该条目仍在视图中可见。

为了尝试测试正在发生的事情，我使用Fixtures创建了一个单独的jsfiddle来查看我是否可以单独使用它并且这样做我想我可能也偶然发现了Ember数据中的灯具错误

首先，这是我一直在研究的Rails + Ember应用程序：

滑轨

class ToDo < ActiveRecord::Base
  has_many :to_do_entries, dependent: :destroy  
  attr_accessible :is_deleted, :is_staging, :is_template, :title
  validates_presence_of :title
end

class ToDoSerializer < ActiveModel::Serializer
  attributes :id,
             :title

  has_many :to_do_entries, embed: :objects
end

class ToDoEntry < ActiveRecord::Base  
  belongs_to :to_do
  attr_accessible :completed_at, :is_deleted, :priority, :title
  validates_presence_of :to_do, :title
end

class ToDoEntrySerializer < ActiveModel::Serializer
  attributes :id,
             :to_do_id,
             :title,
             :priority
end

灰烬

/*---------------*/
/* Application   */
/*---------------*/

PLURAL_MAPPINGS = {"to_do_entry": "to_do_entries"};

App = Em.Application.create({
  rootElement: '#content',
  store: DS.Store.create({
    adapter:  DS.RESTAdapter.create({ plurals: PLURAL_MAPPINGS }),
    revision: 4
  })
});

/*---------------*/
/* Controllers   */
/*---------------*/

App.TodoController = Ember.ObjectController.extend({
  destroy: function() {
    this.transaction = App.store.transaction();
    this.transaction.add(this.get('content'));
    if (window.confirm("Are you sure you want to delete?")) { 
      this.get('content').deleteRecord();
      this.transaction.commit();
      App.router.transitionTo('todo');
    }
    else{
      this.transaction.rollback();
      this.transaction = null;
    }
  }
});

App.Todo_entriesController = Ember.ArrayController.extend();

App.Todo_entryController = Ember.ObjectController.extend({
  destroy: function() {
    this.transaction = App.store.transaction();
    this.transaction.add(this.get('content'));
    if (window.confirm("Are you sure you want to delete?")) { 
      this.get('content').deleteRecord();
      this.transaction.commit();
      App.router.transitionTo('todo');
    }
    else{
      this.transaction.rollback();
      this.transaction = null;
    }
  }
});

/*--------*/
/* Models */
/*--------*/

App.ToDo = DS.Model.extend({
  title: DS.attr('string'),
  group: DS.belongsTo('App.Group'),
  to_do_entries: DS.hasMany('App.ToDoEntry', { embedded: true })
});

App.ToDoEntry = DS.Model.extend({
  title: DS.attr('string'),
  to_do_id: DS.attr('number'),
  priority: DS.attr('number'),
  todo: DS.belongsTo('App.ToDo')
});

/*-------*/
/* Views */
/*-------*/ 

App.TodoView = Ember.View.extend({
  templateName: 'app/templates/todo'
});

App.Todo_entriesView = Ember.View.extend({
  templateName: 'app/templates/todo_entries'
});

App.Todo_entryView = Ember.View.extend({
  templateName: 'app/templates/todo_entry',
  destroyEntry: function() {
    console.log('Todo_entryView - destroyEntry');
    this.get('controller').destroy();
  },
  init: function(){
    this._super();
    this.set(
      'controller',
      App.Todo_entryController.create({ content: this.get('content') })
    );
  }  
});  

/*-----------*/
/* Templates */
/*-----------*/ 

todo.hbs

<article>
  <h1>{{title}}</h1>  
  <div class="widget_links">
    <a {{action destroy target="view"}}>Delete</a>
  </div>
  {{outlet}}
</article>

todo_entries.hbs

{{#if isLoading}}
  <p>Loading...</p>
{{else}}
  <ul class="list">
  {{collection contentBinding="content" itemViewClass="App.Todo_entryView"}}
  </ul>
{{/if}}

todo_entry.hbs

<li>
{{#if isLoading}}
  Loading...
{{else}}
  {{view.content.id}}) {{view.content.title}} Priority: {{view.content.priority}}
  <a {{action destroyEntry href="true" target="view"}}>Delete</a>
{{/if}}
</li>

/*--------*/
/* Router */
/*--------*/

App.Router = Ember.Router.extend({
  enableLogging: true,
  location: 'hash',
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      connectOutlets: function(router) {
        var todo = App.ToDo.find(21);
        router.get('applicationController').connectOutlet('todo', todo);
        var todoController = router.get('todoController');
        todoController.connectOutlet('todo_entries', todoController.get("to_do_entries"));
      }
    })
  })
}); 

App.initialize();

如上所述，这非常接近工作，但令人沮丧的是似乎没有从视图中删除条目。我在这里做了一些明显的错误，或者这是一个错误？

灯具错误？

其次，我使用灯具制作了一个可行的版本。但是，除非请求App.ToDo.find（）（即findAll），否则看起来夹具数据不会加载。

以下是两个例子：

单一操作，删除失败。

http://jsfiddle.net/danielrosewarne/vDGhe/1/

第一个加载单个要做的事情，与它的相关条目。单击“删除”时，您会正确地收到警告，并使对象无效。但是，该条目仍保留在视图中。

注意，如果您使用控制台查看，您会看到isDirty状态设置为true。

多次尝试，一切正常

http://jsfiddle.net/danielrosewarne/LeLyy/1/

第二个列出索引视图中的所有待处理记录，从而预先加载它看起来的数据。当您单击要执行以查看其条目时，删除将按预期工作。（顺便提一下，如果您只是在示例1的控制台中执行App.ToDo.find（），这也可以。）

这让我觉得这是Ember数据中的一个错误，我是对的还是我做错了什么？

谢谢，

丹

Answer 1

transaction.commit（）是异步的，但您正在立即转换到路径中的另一个状态。视图在事务完成之前得到更新。我相信这是问题，或者至少这是一个问题。在异步操作方面，Ember非常棘手。试试这个：

App.Todo_entryController = Ember.ObjectController.extend({
  destroy: function() {
    this.transaction = App.store.transaction();
    this.transaction.add(this.get('content'));
    if (window.confirm("Are you sure you want to delete?")) { 
      this.get('content').deleteRecord();
      this.get('content').one('didDelete', function() {
        App.router.transitionTo('todo');
      });
      this.transaction.commit();
    }
    else{
      this.transaction.rollback();
      this.transaction.delete();
    }
  }
});

此外，整个功能应该在路由器中，而不是控制器，因为它会改变状态。当你把它粘在路由器上时，你正在掩盖状态变化。

干杯。

Ember数据夹具和视图绑定。这些错误？

1 个答案: