如何在ember中绑定js输入值？ [英] How to bind js input value in ember?

问题描述

 < script type =text / x我正在使用一个具有html输入框的ember组件-handlebarsdata-template-name =components / top-bar> 
< input type =textplaceholder =Searchid =searchboxvalue =搜索> 
< / script> 
  

从我的组件，我在触发一个动作，同时输入搜索框，其值为，

  App.TopBarComponent = Ember.Component.extend（{
 
 keyUp：function（event）{
 var self = this; 
 if（event.keyCode == 13）{
 var search_text = $（'＃searchbox'）。val（）; //否I18N 
 self.sendAction （'searchEnterAction'，search_text）; //否I18N 
} 
} 
}）; 
  

我在mixin中有一个动作。在这个行动中，我只是转向另一条路线。

像这样，

  searchEnterAction：function（search_text）{
 var self = this; 
 self.transitionTo（'search'，search_text）; 
} 
  

在我的Router.js中，

  this.resource（'search'，{path：'/：search_value'}）; //否I18N 
  

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

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

但是，当我刷新具有相同路由值的页面时，该输入值不会与动态路由值绑定。我需要绑定该输入框的值与该路由中有什么。

如何将html输入值与ember动态路由绑定？请帮我解决这个问题。

我正在分享jsbin链接以供参考。

转换阶段（刷新之前）

刷新页面后（ After刷新）

JSBIN

解决方案

这是工作演示

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

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

I am having an ember component which has a html input box like,

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

From my component, I am triggering an action while enter that search box with value like,

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

I have an action in mixin. In that action I am just do transition to another route.

Like this,

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

In my Router.js,

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

I am having dynamic values as a parameter to that route.

When I am do enter from that input box, that input value sets as a dynamic value to that route.

But, When I refresh that page with the same route value, that input value didn't bind with dynamic route value. I need to bind that input box value with what is having in that route.

How do I bind that html input value with ember dynamic route? Please help me out of this.

I am sharing jsbin link for your reference.

Transition stage(Before Refresh)

After Refreshing the page (After Refresh)

JSBIN

解决方案

Here is the working demo.

You need to declare a property on the controller which will hold the search text.

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

Bind the searchInput value to your component property. When the component renders, use the component property to update the search input value. Also, add an observer to the searchText in the component. This observer will update its value when the searchInput in the controller changes. Use this observer to update the input box value. This will be used when the search text is set to the controller via the 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);
    }
  }

});

这篇关于如何在ember中绑定js输入值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！