How to bind js input value in ember?

Question

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

Answer 1

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

});