Question

我有一个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链接供您参考。

过渡阶段（Before Refresh）

刷新页面后After Refresh）

JSBIN

Answer 1

<强> Here is the working demo.

您需要在控制器上声明一个包含搜索文本的属性。

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

将searchInput值绑定到组件属性。组件呈现时，使用component属性更新搜索输入值。另外，将观察者添加到组件中的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);
    }
  }

});

Answer 2

有一些问题导致无法正常工作。

首先，组件中的输入需要绑定到搜索框中输入的值。这可以通过将search_value属性传递到组件并绑定输入来完成：

{{input type="text" placeholder="Search" id="searchbox" value=search_value}}

第二个问题是您的搜索路径需要能够将此search_value值传递到组件中。要解决这个问题，您需要弄清楚重构模板的意义。这是一个选项，可将初始搜索框移动到单独的index模板中，然后将新的绑定搜索框添加到search模板中：

<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>

JSbin

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

2 个答案: