我将此作为我的引导数据,当从数据库中没有检索到任何内容时,我将其推送到模型:
var liveaudience = {
triggers : [
{
'trigger_id': 'vocal_stomp',
'duration': 1000,
'color': '#F23000',
'sound': 'A#'
},
{
'trigger_id': 'guitar_stomp',
'duration': 600,
'color': '#CC0234',
'sound': 'Cmaj'
},
{
'trigger_id': 'drum_pad',
'duration': 1200,
'color': '#CF2451',
'sound': 'Emin'
}
]
};
我有一条路线,它执行此操作,然后在模板上呈现这三个引导元素:
get('/:triggerId?', function(page, model, params){
var triggers = model.get('liveaudience.triggers');
if(typeof triggers === 'undefined'){
// bootstrap triggers
model.push('liveaudience.triggers', liveaudience.triggers);
}
model.subscribe("liveaudience.triggers", function(err, scopedModels){
page.render({'triggers': scopedModels.get()[0]});
});
});
然后是模板:
<ul id="triggers">
{{#each triggers}}
<li data-id="{{id}}" class="trigger" style="background-color:{{color}};">
<span class="trigger-label">{{trigger_id}}</span>
<a x-bind="click:removeTrigger" class="remove-trigger">x</a>
</li>
{{/}}
</ul>
一切都显示出来了,但 {{id}} 返回一个函数,我希望它是一个唯一分配的GUID。主要问题是我不知道在单击和触发removeTrigger
处理程序时如何从 DOM 中获取和删除此元素。查看示例,我在处理程序中看到了这一点:
model.at(e.target).remove();
但这不起作用。
有任何想法吗?!