0
我想获得自定义过滤器与reactive-table流星包一起工作，但它不工作，并找不到为什么......一切看起来正确的代码，但在客户端上我从下拉“巴厘岛”，但不会过滤表：自定义过滤与反应表流星包不工作
HTML：
<head>
<title>JavaScript table components comparison</title>
</head>
<body>
<div id="content">
{{> featureComparison}}
</div>
</body>
<template name="featureComparison">
<label>Surf Spot</label>
<select class="form-control" id="surf-spot-select">
<option></option>
<option>Bali</option>
</select>
<div id="table">
{{> reactiveTable collection=tables settings=tableSettings }}
</div>
</template>
JS：
Tables = new Meteor.Collection('features');
if (Meteor.isClient) {
var checkOrX = function (value) {
var html;
// first, normalize the value to a canonical interpretation
if (typeof value === 'boolean')
value = {
support: value
};
if (value === null || value === undefined) {
html = '<span style="color: orange; font-weight: bold">?</span>';
} else {
if (value.support === true)
html = '<span style="color: green">✔</span>'
else if (value.support === false)
html = '<span style="color: red">✘</span>';
else
html = '<span style="color: lightblue">' + value.support + '</span>';
if (value.link)
html += ' (<a href="' + value.link + '">more</a>)';
}
return new Spacebars.SafeString(html);
};
Template.featureComparison.helpers({
tables : function() {
return Tables;
},
tableSettings : function() {
return {
showFilter: false,
rowsPerPage: 10,
showNavigation: 'auto',
showColumnToggles: true,
fields: [
{
key: 'name',
label: 'Library',
fn: function (name, object) {
var html = '<a name="' + name +'" target="_blank" href="' + object.url + '">' + name + '</a>';
return new Spacebars.SafeString(html);
}
},
{ key: 'multisort', label: 'Multi-column sorting', fn: checkOrX },
{ key: 'pages', label: 'Pagination', fn: checkOrX },
{ key: 'filter', label: 'Filtering/Search', fn: checkOrX },
{ key: 'resize', label: 'Resizable Columns', fn: checkOrX },
{ key: 'edit', label: 'Inline Editing', fn: checkOrX },
{ key: 'responsive', label: 'Mobile/Responsive', fn: checkOrX },
{ key: 'i18n', label: 'Internationalization', fn: checkOrX, hidden: true },
{ key: 'keyboard', label: 'Keyboard navigation', fn: checkOrX, hidden: true },
{ key: 'plugins', label: 'Plugins', fn: checkOrX, hidden: true },
{ key: 'meteor', label: 'Meteor Integration', fn: checkOrX, hidden: true },
{ key: 'lastUpdate', label: 'Last update', fn: checkOrX }
],
};
}
});
Template.featureComparison.created = function() {
this.filter = new ReactiveTable.Filter('surf-spot', []);
};
Template.featureComparison.events({
'change #surf-spot-select': function (event,template) {
var input = $("#surf-spot-select").val().toLowerCase();
if (input === 'bali') {
template.filter.set(input);
console.log("bali")
} else {
template.filter.set("");
console.log("nothing")
}
}
});
}