0

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

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

为了尝试测试正在发生的事情，我使用 Fixtures 制作了一个单独的 jsfiddle，以查看是否可以使其独立工作，这样做我想我可能还偶然发现了 Ember 数据中的fixture 错误。

首先，这是我一直在开发的 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/

第二个列出了索引视图中的所有待办事项记录，从而预先加载了看起来的数据。当您单击 to do 以查看其条目时，删除将按您的预期进行。（顺便说一句，如果您只是在示例 1 中的控制台中执行 App.ToDo.find()，这也有效。）

这对我来说就像是 Ember 数据中的一个错误，我是对的还是我做错了什么？

谢谢，

担

4

1 回答 1

0

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();
    }
  }
});

此外，整个功能应该在路由器中，而不是控制器中，因为它会更改状态。当您将状态更改粘贴在路由器中时，您正在掩埋状态更改。

干杯。

于 2012-12-22T01:38:55.173 回答