Setting an Embers.js property from within Handlebars.js

I have a site that is using Node.js with Jade on the backend, and on the client-side I am using Handelbars.js with Embers.js. I am passing a property into my .jade template for my flickr apiKey, so that I can keep all these keys in one server side json file. I then want to set my Embers flickrPhotoSearchRequestModel's property in the html, so that it can use it to access the api.

I am trying to do

script(type='text/x-handlebars')
  {{Piccee.flickrPhotoSearchRequestModel.set('api_key', 1)}}

But, that does not seem to work.

FlickrController.js

Piccee.FlickrPhotoSearchRequestModel = Em.Object.extend({
api_key: "",
searchTerm: "",
page: 1,
url: function() {
    var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search";
    url += '&api_key=' + this.get("api_key");
    url += '&tags=' + this.get("searchTerm");
    url += '&text=' + this.get("searchTerm");
    url += '&page=' + this.get('page'); 
    url += '&sort=interestingness-desc&extras=url_sq%2C+url_t%2C+url_s%2C+url_q%2C+url_m%2C+url_n%2C+url_z%2C+url_c%2C+url_l%2C+url_o&format=json&nojsoncallback=1';
    return url;
}.property('api_key', 'searchTerm', 'page'),    
});

Piccee.flickrPhotoSearchRequestModel = Piccee.FlickrPhotoSearchRequestModel.create({
api_key: "123",
searchTerm: "",
page: 1

});

In .js, that above set method would work just fine, it just won't work in the Handelebar's template.

Ember does not execute what is in the brackets, so trying something like a set will not work. Instead you should create a View and take in your data as parameters (ie "api_key"). Now I would normally recommend doing this via bindings so stuff could update/propagate but your data is generated in the HTML and only needs to be executed on once... So you might try something like this:

<script type='text/x-handlebars'>
    {{#view SomeView api_key=1}}
        <a {{bindAttr href="piccee.url"}}>Some Pics</a>
    {{/view}}
</script>

Then:

SomeView = Em.View.extend({
    api_key: null,
    piccee: null,

    init: function(){
        this._super();
        this.set('piccee', Piccee.FlickrPhotoSearchRequestModel.create({ 
            api_key: this.get('api_key'); 
        }));
    }
});

If you are having trouble with this, let me know and I will create a fiddler.

All that being said, you could also register your own handlebars helper (though Ember.Handlebars.registerHelper) which can take in parameters and draw a view. It essentially makes a widget; I would only go down this path once you had the view working and you knew you wanted to use it over and over again.

EDIT: So, now we want bind that value instead of setting it initially. You can reference parentViews in your paths which makes things like this kind of nice.

{{#view SomeHeaderView api_key=1}}
    ...
    stuff & things 
    ...

    {{#each myList}}
        {{#view SomeView}}
            ... link here ...
        {{/view}}
    {{/each}}
{{/view}}

And inside that url (change the api_key to be parentView.api_key):

...
url: function() {
    var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search";
    url += '&api_key=' + this.get("parentView.api_key");
    url += '&tags=' + this.get("searchTerm");
    url += '&text=' + this.get("searchTerm");
    url += '&page=' + this.get('page'); 
    url += '&sort=interestingness-desc&extras=url_sq%2C+url_t%2C+url_s%2C+url_q%2C+url_m%2C+url_n%2C+url_z%2C+url_c%2C+url_l%2C+url_o&format=json&nojsoncallback=1';
    return url;
    }.property('parentView.api_key', 'searchTerm', 'page'),    
...

I usually end up with a view because I find I want more then simple operations and it is legit. I am still not 100% sure I follow, but I think this is the direction you are going.