Question

我想在加载（渲染）模板时使用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

Answer 1

在渲染内部，您需要使用this.data来访问模板的数据上下文。

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

Meteor：在渲染模板时在javascript中使用模板变量

1 个答案: