流星和数据绑定

Question

假设您有一个来自对象数组onRendered的项目列表。您的列表项是具有特定CSS的按钮。当您单击按钮选择要选择的项目时，该按钮将使用jQuery更改其类。因此，现在您授予用户在另一个数组中搜索并使用相同的帮助函数显示结果。结果是，单击列表中的第一个按钮，当您开始搜索时，始终选择可见元素的第一个元素，因为css值就是那个。 Meteor仅显示数据，实际上不会再次呈现此列表。如何在不使用jQuery的情况下摆脱所选按钮。有什么想法吗？

包含所选按钮的列表

使用仍然选中的按钮搜索后的结果列表

Template['brands'].events({
'keyup #brand-filter': function (e,t) {
    var search:string = $(e.target).val().toLowerCase(),
        liveBrands = LIVEBRANDS.brands || {},
        returnBrands = [];

    if(search.length > 0)
    {
        var searchRegex = new RegExp('^' + search.toLowerCase(), 'i');

        // iterate over each element in the array
        for (var i = 0; i < LIVEBRANDS.brands.length; i++){
            // look for the entry with a matching `code` value
            if(searchRegex.test(LIVEBRANDS.brands[i].name))
            {
                returnBrands.push(_.extend(liveBrands[i],{"shortName":"b"}));
            }
        }

        Session.set('collection',returnBrands);
    }
    else
    {
        Session.set('collection',originBrandsArry);
    }
}});

<template name="ob_brands">
<div class="modal-content flow-text">

    {{>order_card data=data}}

    <div class="row">
        <div class="col l12 m12 s12 center">
            {{>ob_title data=data}}
        </div>
        <p class="col l3 m3 s3">&nbsp;</p>
        <div class="col l6 m6 s6 brand-search input-field">
            <i class="ion-ios-search-strong prefix"></i>
            <input id="brand-filter" type="text" placeholder="Brands.."/>
        </div>
        <p class="col l3 m3 s3">&nbsp;</p>
        <div class="col l12 m12 s12 center">
            <!--This part is what I am looking for-->
            {{#each brands}}
                <a class="btn btn-flat active" data-name="{{this.name}}" data-id="{{this.shortName}}{{this.id}}" href="#{{this.id}}">{{this.name}}</a>
            {{/each}}
        </div>

    </div>

</div>
<div class="modal-footer">

</div>