Ember.js - build a link dynamically using input values

Question

Using ember.js I have an input:

{{input id="my_input" name="my_input" type="text"}}

Then I want to create a link, using linkTo, but want the value of the input to be part of the href. Like this:

{{#linkTo 'my_resource' my_input}}the link{{/linkTo}}

I have the resource defined like this:

App.Router.map(function() {
    this.resource("my_resource", {path: ":my_input"});
});

Is that possible?

Thanks.

Answer 1

Definitely:

http://emberjs.jsbin.com/eFAGixo/1/edit

App.Router.map(function() {
  this.resource('search', {path:'search/:search_text'});
});


App.SearchRoute = Ember.Route.extend({
  model: function(params){
  // at this point params.search_text will have
  // what you searched for
  // since you are sending a string, it will hit the model
  // hook, had you sent an object it would have skipped this
  // hook and just used the object as your model
    return { searchInThisRoute: params.search_text};
  }
});


<script type="text/x-handlebars" data-template-name="application">
 <h2>Welcome to Ember.js</h2>

  {{input value=searchText}}
  {{#link-to 'search' searchText}} Go To Search{{/link-to}}

  {{outlet}}
</script>

PS: This actually seems like it would make more sense as a button and using Ember Actions, but this works just as dandy.