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.

JSBIN