1

テンプレートが読み込まれる (レンダリングされる) ときに、javascript を使用して DOM を変更したいと考えています。ただし、そもそもテンプレートに渡された変数を取得できないようです。これらの変数を使用できる唯一の場所は、HTML テンプレート自体またはテンプレート ヘルパー内にあるようです。しかし、テンプレートのレンダリングが終了したら、(これらの変数に依存する) JavaScript を実行したいと考えています。

html は正常にレンダリングされますが、とにかく参照用にここに示しました。

HTML テンプレート:

<template name="cityDataset">
    {{#each airports}}
    <li>{{name}}
        <ul>
            <li>{{description}}</li>
            <li><a href="{{mapLink}}" target="_blank">Directions from...</a></li>
        </ul>
    </li>
    {{/each}}
</template>

Javascript ファイル:

Template.cityDataset.helpers({
  airports: function() {
    console.log("helper-name: " + this.name);        // New York City
    console.log("helper-country: " + this.country);  // United States

    return CityDatasets.findOne({name: this.name, country: this.country}).airports;
  },
});

Template.cityDataset.rendered = function() {
    console.log("name: " + this.name);        // undefined
    console.log("country: " + this.country);  // undefined

    // I want to do stuff here! But I can't get the name and country :(
    //
    // doSomethingCoolToDOM(this.name, this.country);

}

コンソールに表示される結果は次のとおりです。

> helper-name: New York City
> helper-country: United States
> name: undefined
> country: undefined
4

1 に答える 1

2

レンダリングされた内部では、this.dataを使用してテンプレートのデータ コンテキストにアクセスする必要があります。

Template.cityDataset.rendered = function() {
  console.log("name: " + this.data.name);
  console.log("country: " + this.data.country);
}
于 2015-01-25T01:32:21.277 に答える