Question

我是Ember的新手，我正在尝试使用Ember View观察控制器中的属性变化。我能够记录视图，但是当属性更改时，处理程序不会触发。

当我用户点击删除记录时，我基本上试图学习Ember从视图中删除项目的方法。我还没有找到一个很好的指南。任何建议都表示赞赏。

如果我要留下任何东西，请告诉我。提前谢谢！

（这是一个继承的代码库;我们尚未准备升级Ember。）

Ember v1.0.0-rc.3

路线

this.resource('posts');

App.PostsRoute = App.AuthenticatedRoute.extend({ // extension of Em.Route
  model: function() {
    return App.Post.list(); // returns a list of posts
  },

  events: {
    // renders a modal in the post context
    showDeleteModal: function(model) {
      this.render('modals/_confirmation', {
        into: 'posts',
        outlet: 'modal',
        controller: 'post'
      });

      this.controllerFor('post').set('model', model);
    }
  }
});

控制器

App.PostsController = Em.ObjectController.extend(App.PagedTable, Ember.Evented, {
  // ...
});

App.PostController = Em.ObjectController.extend({
  foo: false,

  del: function() {
    this.set('foo', true);
  }
});

视图

App.PostsView = Em.View.extend();

App.PostView = Em.View.extend({
  didInsertElement: function() {
    console.log('Inserted!');
  },

  test: function() {
    console.log('Observed!');
  }.observes('controller.foo')
});

模板

{{#each data in currentDataBlocks itemController="post" itemViewClass="App.PostView"}}
  <tr>
    <td>Stuff</td>
    <td>Stuff</td>
    <td>Stuff</td>
    <td>Stuff</td>
    <td><button class="icon-trash" {{action showDeleteModal data}}></button></td>
  </tr>
{{/each}}

<!-- ... -->

{{outlet modal}}

Answer 1

在我看来，管理视图中项目列表的最佳方法是创建列表的属性，仅包含需要显示的项目，并在视图中迭代此列表。 / p>

使用您的示例（为简单起见做了一些改动），我会执行以下操作：

控制器：

PostsController = Em.ObjectController.extend(....
    fooDataBlocks: function(){
        return this.get("currentDataBlocks").filter(function(dataBlock){
            return dataBlock.get("foo");
        }
    }.property("currentDataBlocks.@each.foo")
);

模板：

{{#each data in fooDataBlocks...}}
   ...
{{/each}}

根据经验，如果可能的话，总是喜欢使用属性而不是观察者。这样，只有在需要时才会缓存和计算值，而不是每次更改。

Ember View不观察房产变化

路线

控制器

视图

模板

1 个答案: