0

我有一个站点在后端使用 Node.js 和 Jade，在客户端我使用 Handelbars.js 和 Embers.js。我正在将一个属性传递到我的 flickr apiKey 的 .jade 模板中，这样我就可以将所有这些密钥保存在一个服务器端 json 文件中。然后我想在 html 中设置我的 Embers flickrPhotoSearchRequestModel 的属性，以便它可以使用它来访问 api。

我正在尝试做

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

但是，这似乎不起作用。

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

});

在 .js 中，上面的 set 方法可以正常工作，只是在 Handelebar 的模板中不起作用。

4

1 回答 1

0

Ember 不会执行括号中的内容，因此尝试 a 之类的东西是set行不通的。相反，您应该创建一个视图并将您的数据作为参数（即“api_key”）。现在我通常建议通过绑定来执行此操作，以便可以更新/传播，但您的数据是在 HTML 中生成的，并且只需要执行一次......所以您可以尝试这样的事情：

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

然后：

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

如果您对此有疑问，请告诉我，我将创建一个提琴手。

话虽如此，您还可以注册自己的车把助手（尽管如此Ember.Handlebars.registerHelper），它可以接受参数并绘制视图。它本质上是一个小部件；一旦你的视图工作并且你知道你想一遍又一遍地使用它，我只会沿着这条路走。

编辑：所以，现在我们想要绑定该值而不是最初设置它。你可以parentViews在你的路径中引用，这使得这样的事情变得很好。

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

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

并在该网址内（更改api_key为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'),    
...

我通常会得到一个视图，因为我发现我想要的不仅仅是简单的操作，而且它是合法的。我仍然不是 100% 确定我会遵循，但我认为这就是你要去的方向。

于 2012-08-21T17:07:00.843 回答