Question

在我的一个空格键调用currentCategory中，我调用addClass(disabled-link)，它会更改当前类别文本的颜色。当我点击此页面上的类别时，这通常正常工作，基本上只是重新路由到同一页面，列出所点击类别的项目。但是，当我第一次从另一个页面到达此页面时，当前类别文本未正确更改。

这是我的模板。 template_name .helper调用此方法：

currentCategory: function(category) {
    check(category, String);
    //console.log(this);
    if(String(this) == Session.get('category')){
        console.log('matching category ' + category);
        $("#" + category).addClass('disabled-link');
        return true;
    }
    return false;
}

这是调用此函数的html：

<div class="filter-list" id="category-filter">
    <h3>Filter by:</h3>
        {{#each category}}
            <div class="filter-element" id={{this}}>
            {{#if currentCategory this}}

                    <div class="accompany-icon">

                    </div>
                    {{this}}

                {{else}}
                    <a class="filter-link" href="{{pathFor 'produceListFilter' _filter=this}}">
                        <div class="accompany-icon">

                        </div>
                        {{this}}
                    </a>
            {{/if}}
            </div>
        {{/each}}


</div>

如上所示，我依赖于一个Session变量，但我可以确认每次都设置Session变量并运行.addClass函数，但UI更改不存在。如果这有帮助，这是我的css：

.disabled-link {
    color: #666666;
}

渲染有什么特别之处，阻止我编辑DOM直到它完全渲染或其他东西？谢谢你的帮助。

Answer 1

关于流星的相当高比例的问题归结为没有及时呈现的应该在其上运行的javascript的事情。尝试将其放入Template.template_name.onRendered。我也会把它放在父模板中，然后在tracker.afterFlush中运行它，这样每次运行子模板时它都不会运行。

Template.template_name.onRendered(function(){
  if (!this.rendered){ //run only on first render
    tracker.afterFlush(highlightCategory);
  }
});

function highlightCategory(){
  Session.get('category');
  $("#" + category).addClass('disabled-link');
}

.addClass（）无法正常运行

1 个答案: