Jquery 如何在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>

我在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 dynamic route绑定？请帮我解决这个问题

我正在分享jsbin链接供您参考

过渡阶段（）

刷新页面后（）

---

有几个问题妨碍了此功能的正常运行

首先，组件中的输入需要绑定到搜索框中输入的值。这可以通过将

search\u值

属性传递到组件中并按如下方式绑定输入来实现：

{{input type=“text”placeholder=“Search”id=“searchbox”value=Search\u value}

第二个问题是，您的搜索路径需要能够将此

search\u值

值传递到组件中。要解决这个问题，您需要弄清楚重组模板的意义。这里有一个选项，它将初始搜索框移动到一个单独的

索引

模板中，然后将一个新的绑定搜索框添加到

搜索

模板中：

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{top-bar searchEnterAction='searchEnterAction'}}
  {{outlet}}
</script>

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

<script type="text/x-handlebars" data-template-name="search">
  <div>In search area!</div>
  {{top-bar searchEnterAction='searchEnterAction' search_value=model.search_value}}
</script>

{{outlet}}
{{顶部栏searchEnterAction='searchEnterAction'}}
{{outlet}}
{{input type=“text”placeholder=“Search”id=“searchbox”value=Search\u value}
在搜索区！
{{顶栏searchEnterAction='searchEnterAction'搜索值=model.search值}

您需要在控制器上声明一个属性，该属性将保存搜索文本

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

});

---

谢谢你的回复。问题是，在我的组件中，它不是一个余烬输入字段。这是一个普通的html输入框。在这种情况下，如何将值绑定到该输入框？在您的示例中，组件具有余烬输入字段。这就是为什么我要面对这个问题。为什么不能在组件@PriyangaV中使用余烬输入字段？这就是将数据绑定到输入的方法。我使用的是整个部分来自另一个第三方包。这就是为什么我不能将该输入替换为Ember输入。有没有其他方法来解决这个用例，比如需要在插入后在DOM中插入一个Ember视图而不是html输入？这就是你想要的吗@谢谢你的回复。它很好用。：-）这正是我想要的。

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

});