title: How to bind js input value in ember?
body: <p>I am having an ember component which has a html input box like, </p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="components/top-bar"&gt;
      &lt;input type="text" placeholder="Search" id="searchbox" value="Search"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>From my component, I am triggering an action while enter that search box with value like,</p>
  
  <pre><code>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
         }
      }
  });
  </code></pre>
  
  <p>I have an action in mixin. In that action I am just do transition to another route.</p>
  
  <p>Like this, </p>
  
  <pre><code>searchEnterAction: function (search_text) {
     var self = this;
     self.transitionTo('search', search_text);
   }
  </code></pre>
  
  <p>In my Router.js, </p>
  
  <pre><code>this.resource('search', {path: '/:search_value'}); //No I18N
  </code></pre>
  
  <p>I am having dynamic values as a parameter to that route.</p>
  
  <p>When I am do enter from that input box, that input value sets as a dynamic value to that route. </p>
  
  <p>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. </p>
  
  <p>How do I bind that html input value with ember dynamic route? Please help me out of this. </p>
  
  <p>I am sharing jsbin link for your reference. </p>
  
  <p>Transition stage(<a href="http://i.stack.imgur.com/4oHpc.png" rel="nofollow">Before Refresh</a>)</p>
  
  <p>After Refreshing the page (<a href="http://i.stack.imgur.com/Xv6e9.png" rel="nofollow">After Refresh</a>)</p>
  
  <p><a href="http://jsbin.com/cipacu/22/" rel="nofollow">JSBIN</a></p>