CODEWITHSUNDEEP
jqueryember.js
Priyanga V
Priyanga V

Reputation: 241

How to bind js input value in ember?

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

Upvotes: 3

Views: 5366

Answers (2)

blessanm86
blessanm86

Reputation: 31779

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

});

Upvotes: 1

Dhaulagiri
Dhaulagiri

Reputation: 3291

There are a couple of issues preventing this from working correctly.

The first is that the input in your component needs to be bound to the value that is entered in the search box. This can be done by passing a search_value property into your component and binding the input like this:

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

The second issue is that your search route needs to be able to pass this search_value value into the component. To fix this you'll need to figure out what makes sense for restructuring your templates. Here is one option which moves the initial search box into a separate index template and then adds a new, bound search box to the search template:

<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

Upvotes: 0

Related Questions