Question

我的问题的示例代码是here。这是一个简单的Ember应用程序，默认显示包含TextField的SearchView。

当用户输入一些文本并按Enter键时，我想转换到另一个状态（displayUserProfile），传递在文本框中输入的值。

首先，在文本框的 insertNewline 回调中，我调用了应用程序路由器的 transitionTo 方法，并将该值作为参数对象的一部分传递：

App.SearchTextFieldView = Em.TextField.extend({
  insertNewline: function() {
    App.router.transitionTo('displayUserProfile', {
      username: this.get('value')
    });
  }
});

这很好，但后来我注意到pangratz在question about infinite scrolling上的回答使用different approach。相反，他在视图的控制器上调用一个方法，该方法又调用控制器目标（即路由器）上的方法。

这会将我的代码更改为：

App.SearchTextFieldView = Em.TextField.extend({
  insertNewline: function() {
    Em.tryInvoke(this.get('controller'), 'displayUserProfile', this.get('value').w());
  }
});

App.SearchController = Em.Object.extend({
  displayUserProfile: function(username) {
    this.get('target').transitionTo('displayUserProfile', {
      username: username
    });
  }
});

我的问题是：哪种方法更好？直接从视图中调用 transitionTo 或将其委托给视图的控制器？

Answer 1

我会推荐一种不同的方法。 insertNewLine应该触发由路由器处理的操作，然后路由器将转换其状态。

App.SearchTextFieldView = Em.TextField.extend({
  insertNewline: function() {
    this.get('controller.target').send('showUser', {username: this.get('value')});
  }
});

App.Router = Ember.Router.extend({
  ...
  foo: Ember.Router.extend({
    showUser: function(router, evt) {
      router.transitionTo('displayUserProfile', evt);
    });
  }
});

您应该将showUser处理程序放在应用程序中有效的最顶层路径上。

此方法遵循Ember应用程序中的一般事件模式，即视图处理DOM级事件，并在适当的情况下将其转换为由路由器处理的语义操作。

Answer 2

我个人认为第二种方法更好。第一件事是静态访问路由器是个坏主意。那么对我来说，你必须保持逻辑少的视图，所以委托给控制器似乎是一个不错的选择在您的情况下，这只是对路由器的调用，但您可以想象在文本字段值上处理一些算法。如果你在视图中执行此过程，这将导致视图，混合UI代码和逻辑代码。 View应该只处理UI代码。

`insertNewline`可以调用transitionTo吗？

2 个答案: