尝试根据点击的控件ID绑定选择车把模板

Question

我正在尝试使用带有把手模板的点击控件标签显示数据。我有以下代码。尝试使用块帮助程序根据单击的控件进行过滤以迭代内部列表。

<script id="ctaFeatureTemplate" type="text/x-handlebars-template">        
    {{#with this.id}}   //I need limit the scope to clicked control id Contacts/calendar   
    <article>
        <div class="row">
            <div class="ctaText span5">
                <h2>{{Heading}} - {{oneliner}}</h2>
                {{#if signedin }} 
                <div class="SignedInMenu">
                    <ul class="entry-meta">
                        <li class="entry-author"><i class="icon-user"></i>Wecome back {{signedinUser}}</li>
                        <li class="entry-category"><i class="icon-tag"></i>{{lastSigninDtm}}</li>
                        <li class="entry-date"><i class="icon-clock"></i>{{activityStatistics}}</li>
                        <li class="entry-comments"><i class="icon-comment"></i>{{comments}}</li>
                    </ul>
                </div>
                {{/if}}
            <p>{{ Description }} </p>
            </div>
            {{#if signedin }} 
        {{commands}}
        {{else}}
        <div class="span5 usp text-center">
            {{#each FeatureUSP}}
                 {{USP}}
            {{/each}}
        </div>
            <div class="span1 usp"> 
                <a class="btn btn-info pull-right" title="Try now">
                    <img src="images/Relgologo57x68.png" class="imgWrapper" /><strong>SIGNUP</strong></a>
            </div>
            {{/if}}
        </div>
    </article>
    {{/with}}
</script>

var privateFeatures = {
    signedin: '',
    signedinUser: 'xxxx',
    Contacts: {
        Heading: 'Contacts',
        oneliner: 'Manage contacts in one place',
        Description: 'Manage contacts and utilize them in your business',

        FeatureUSP: [
            {
                USP: 'Import Contacts ',
                icon: 'icon-down'
            },
            {
                USP: 'Social Sync',
                icon: 'icon-facebook'
            },
            {
                USP: 'Collect Contacts from Mail, IM etc.',
                icon: 'icon-book'
            }
        ]
    },
    Calendar: {
        Heading: 'Calendar',
        oneliner: 'Manage Your calendar in one place',
        Description: 'Manage schedules etc',

        FeatureUSP: [
            {
                USP: 'Import Contacts ',
                icon: 'icon-down'
            },
            {
                USP: 'Social Sync',
                icon: 'icon-facebook'
            },
            {
                USP: 'Collect Contacts from Mail, IM etc.',
                icon: 'icon-book'
            }
        ]
    }
};
$(".bpaas").click(function () {
    privateFeatures['Heading'] = this.id;
    console.log(this.id);
    var srctemplate = $("#ctaFeatureTemplate").html();
    var template = Handlebars.compile(srctemplate);
    var htmltext = template(privateFeatures);
    $('#' + this.name).html(htmltext);
})

Handlebars.registerHelper('each', function (context, options) {
    var ret = "<ul class='inline'>";
    for (var i = 0, j = context.length; i < j; i++) {
        ret = ret + "<li class='one_fourth'><div class='smallIconW'><span class='iconWrapper iconSmall'><i class='" + context[i].icon + "'></i></span><strong><br/>" + options.fn(context[i]) + "</strong></div></li>";
    }

    return ret + "</ul>";
});
Handlebars.registerHelper('with', function (context, options) {
    return options.fn(context);
});