0

バックエンドで Jade を使用して Node.js を使用しているサイトがあり、クライアント側では、Embers.js で Handelbars.js を使用しています。flickr apiKey の .jade テンプレートにプロパティを渡しているので、これらすべてのキーを 1 つのサーバー側の json ファイルに保持できます。次に、Embers flickrPhotoSearchRequestModel のプロパティを html に設定して、それを使用して 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もうまくいきません。代わりに、View を作成し、データをパラメーター (つまり「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}}

そして、その URL 内 ( を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 に答える