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

【问题标题】：I want Ember.js' {{input value="searchTerm"}} to set its value to ' ' when the URL changes我希望 Ember.js' {{input value="searchTerm"}} 在 URL 更改时将其值设置为 ' '
【发布时间】：2014-10-23 07:24:42
【问题描述】：

我会尽量简化这个问题，

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

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

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

这是控制器中的一个属性：

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'),

所以分解我需要的东西：

不管searchTerm的当前值是多少，都需要设置为''。
将 searchTerm 的值设置为 ' ' 仅在页面转换时发生

【问题讨论】：

您正在寻找Route#willTransition。在你的路由中为该事件实现一个处理程序
好吧，这样可能会留下一个问题：在 willTransition 中将 searchTerm 的值设置为 ' '。我如何将 searchTerm 的值（在控制器的属性中定义）设置为我的路由中 willTransition 函数内部的“”。

标签： javascript ember.js properties ember-router

【解决方案1】：

这可以通过didTransition 或willTransition 事件处理程序在路由上完成。路由引用了它们的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')，因此您保留任何现有的处理程序并附加您的处理程序。然后你可以把它变成一个 mixin 供其他路由使用，或者其他路由可以从这个类继承而不会破坏任何其他自定义转换处理程序（如果有的话）。

【讨论】：

我使用 didTransition 作为我的解决方案，它就像一个魅力！谢谢Milky！