javascript - 我希望 Ember.js 的 {{input value ="searchTerm"}} 在 URL 更改时将其值设置为 ' '

Question

我会尽量简化这个问题，

但每次 URL 更改时，我都需要 handlebar.js 的 {{input value="searchTerm"}} 将 searchTerm 的值设置为“null”。

上述输入旨在自动过滤同一页面上的列表。在输入中键入内容会自动将“searchTerm”的值更新为键入的内容

值 searchTerm 在此名为 searchResults 的操作中定义

这是 Controller 中的一个属性:

searchResults: function() {
    var searchTerm = this.get('searchTerm');
    var regExp = new RegExp(searchTerm, 'i');

    // We use `this.filter` because the contents of `this` is an array of objects
    var filteredResults = this.filter(function(category) {
        return regExp.test(category.get('categoryName'));
    });      
    return filteredResults;
}.property('@each.categoryName', 'searchTerm'),

所以分解我需要的东西:

1. 无论 searchTerm 的当前值是多少，都需要将其设置为 ' '。
2. 将 searchTerm 的值设置为 ' ' 仅在页面转换时发生

Answer 1

这可以通过 didTransition 或 willTransition 事件处理程序在 Route 上完成。路由有对它们的 controller 的引用(通过 this.controller)，你仍然可以通过 controllerFor 获取它(例如:var c = this.controllerFor('controllerName'); 所以你可以做这样的事情:

App.SomeRouteThatErasesTheSearchTermRoute = Ember.Route.extend({
  actions: {
    // you could implement with didTransition. No arguments for didTransition tho
    didTransition: function() {
      this.controller.set('searchTerm', '');  
    },
    // OR, implement with willTransition
    willTransition: function(transition) {
      this.controller.set('searchTerm', '');
    }
  }
});

您还可以将其实现为一个单独的方法，该方法在 on('willTransition') 时被触发，这样您就可以保留任何现有的处理程序并仅附加您的处理程序。然后，您可以将它变成供其他路由使用的混入，或者其他路由可以从此类继承，而不会破坏任何其他自定义转换处理程序(如果有的话)。