Ember.js “insertNewline”能否调用转换？

我的问题的示例代码是。 这是一个简单的Ember应用程序，默认情况下显示包含文本字段的SearchView

当用户输入一些文本并点击Enter键时，我想通过在文本框中输入的值转换到另一个状态（displayUserProfile）

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

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

这很好，但后来我注意到pangratz在a上的回答使用了a。相反，他调用了视图控制器上的一个方法，该方法反过来调用了控制器目标（路由器）上的一个方法

这将我的代码更改为：

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

我的问题是：哪种方法更好？

---

直接从视图调用Transition到，或将其委托给视图的控制器？

我个人认为第二种方法更好。 首先，静态访问路由器是个坏主意。那么对我来说，您必须减少视图的逻辑性，因此委派给控制器似乎是一个不错的选择。

---

在您的例子中，这只是对路由器的一个调用，但是您可以想象在textfield值上处理一些算法。如果在视图中执行此处理，将导致视图，混合UI代码和逻辑代码。视图应该只处理UI代码。

我个人认为第二种方法更好。 首先，静态访问路由器是个坏主意。那么对我来说，您必须减少视图的逻辑性，因此委派给控制器似乎是一个不错的选择。

---

在您的例子中，这只是对路由器的一个调用，但是您可以想象在textfield值上处理一些算法。如果在视图中执行此处理，将导致视图，混合UI代码和逻辑代码。视图应该只处理UI代码。

我建议使用不同的方法

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级别的事件，并在适当的情况下，将它们转换为由路由器处理的语义操作。

我建议使用另一种方法

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级别的事件，并在适当的情况下将它们转换为由路由器处理的语义操作。

Thank，Luke。在我的一个审问Luke的程序中实现了。当我在幻灯片53中看到您的演示时，我了解到事件应该从视图传递到路由器，并经过控制器。看来我误解了。但是，在这里的示例中，showUser中的

evt

不是一个事件，而是一个带有用户名的对象，或者该对象是否按余烬转换为jQuery.event？如果这真的是一个事件，那没关系，否则如果我直接从{action}助手调用showUser，可能会出错，因为这是一个jQuery事件。@sly7_7 2件事：1）它们通过控制器，通常只是通过控制器的目标属性。2） 是的，从action helpers发送到路由器的事件（是添加了上下文属性的jQuery事件）与从应用程序中其他地方发送的典型事件之间存在断开连接re：数据结构。为了保持它们相同，您可以发送

{context:{username:myUsername}}

。这有点冗长，但这可能是一个更好的方式。谢谢，卢克。在我的一个审问Luke的程序中实现了。当我在幻灯片53中看到您的演示时，我了解到事件应该从视图传递到路由器，并经过控制器。看来我误解了。但是，在这里的示例中，showUser中的

evt

不是一个事件，而是一个带有用户名的对象，或者该对象是否按余烬转换为jQuery.event？如果这真的是一个事件，那没关系，否则如果我直接从{action}助手调用showUser，可能会出错，因为这是一个jQuery事件。@sly7_7 2件事：1）它们通过控制器，通常只是通过控制器的目标属性。2） 是的，从action helpers发送到路由器的事件（是添加了上下文属性的jQuery事件）与从应用程序中其他地方发送的典型事件之间存在断开连接re：数据结构。为了保持它们相同，您可以发送

{context:{username:myUsername}}

。这有点冗长，但很可能是更好的方式。