如何在ember中绑定js输入值？

我有一个 ember 组件，它有一个 html 输入框，例如，

<script type="text/x-handlebars" data-template-name="components/top-bar">
    <input type="text" placeholder="Search" id="searchbox" value="Search">
</script>

从我的组件中，我在输入具有如下值的搜索框时触发操作：

App.TopBarComponent = Ember.Component.extend({

    keyUp: function (event) {
       var self = this;
       if (event.keyCode == 13) { 
         var search_text = $('#searchbox').val(); //No I18N
         self.sendAction('searchEnterAction', search_text); //No I18N
       }
    }
});

我在 mixin 中有一个动作。在那次行动中，我只是过渡到另一条路线。

像这样，

searchEnterAction: function (search_text) {
   var self = this;
   self.transitionTo('search', search_text);
 }

在我的 Router.js 中，

this.resource('search', {path: '/:search_value'}); //No I18N

我将动态值作为该路线的参数。

当我从该输入框中输入时，该输入值将设置为该路线的动态值。

但是，当我使用相同的路由值刷新该页面时，该输入值没有与动态路由值绑定。我需要将该输入框值与该路由中的内容绑定。

如何将该 html 输入值与 ember 动态路由绑定？请帮助我摆脱这个困境。

我分享 jsbin 链接供您参考。

过渡阶段（刷新前 https://i.stack.imgur.com/4oHpc.png)

刷新页面后（刷新后 https://i.stack.imgur.com/Xv6e9.png)

JSBIN http://jsbin.com/cipacu/22/

这是工作演示。 http://jsbin.com/fiwove/edit?html,js

您需要在控制器上声明一个用于保存搜索文本的属性。

App.ApplicationController = Em.Controller.extend({
  searchInput: ''
});

绑定searchInput您的组件属性的值。 当组件呈现时，使用组件属性更新搜索输入值。另外，添加一个观察者searchText在组件中。当以下情况发生时，该观察者将更新其值：searchInput在控制器的变化。使用这个观察者来更新输入框的值。当通过 url 将搜索文本设置到控制器时，将使用此选项。

{{top-bar searchEnterAction='searchEnterAction' searchText=searchInput}}

App.SearchRoute = Em.Route.extend({
  model: function(params) {
    this.controllerFor('application').set('searchInput', params.search_value);
  }
});

App.TopBarComponent = Ember.Component.extend({  

  searchText: '',

  setup:function() {
    $('#searchbox').val(this.get('searchText'));
  }.on('didInsertElement'),

  updateValue:function() {
    $('#searchbox').val(this.get('searchText'));
  }.observes('searchText'),

  keyUp: function (event) {
    if (event.keyCode == 13) { 
      var search_text = $('#searchbox').val();
      console.log(search_text);
      this.sendAction('searchEnterAction', search_text);
    }
  }

});