Jquery 多 select 流星插件
Jquery multi select plugin with meteor
我正在使用 jquery multiSelect 插件 (http://harvesthq.github.io/chosen/) 和 meteor。它工作正常。 When when the list of options changes dynamically, it shows the old same values in the option list.
<template name="testDynamicSelect">
<select class="chosen-select">
{{#each selectList}}
<option style="width: 300px">{{this}}</option>
{{/each}}
</select>
</template>
助手
Session.set('selectList',['delhi','pune','chandigarh']);
Session.set('run',true);
Template.testDynamicSelect.helpers({
selectList:function(){
return Session.get('selectList')
}
});
Template.testDynamicSelect.rendered = function(){
var instance = this;
instance.autorun(function(){
if(Session.get('run')){
var config = {
'.chosen-select': {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
Session.set('run',false);
console.log('run select ');
}
});
}
现在在控制台中,当我输入时
Session.set('selectList',['delhi','pune','chandigarh','bangalore']);
Session.set('run',true);
我没有得到更新值 'bangalore'。
您的 .rendered()
仅在呈现模板时运行一次,它不会对 run
会话变量中的更改做出反应,直到再次呈现模板。
您需要更新模板助手中的菜单,使其对地名数组中的更改做出反应。
如果您检查正确,那么选项标签是动态生成的。但是在jquery multi select中没有动态显示。原因是,即使选项标签是动态生成的,您也没有更新 multi-select 列表。
仔细阅读文档,需要触发更新如下:
$(".chosen-select").trigger("chosen:updated");
我正在使用 jquery multiSelect 插件 (http://harvesthq.github.io/chosen/) 和 meteor。它工作正常。 When when the list of options changes dynamically, it shows the old same values in the option list.
<template name="testDynamicSelect">
<select class="chosen-select">
{{#each selectList}}
<option style="width: 300px">{{this}}</option>
{{/each}}
</select>
</template>
助手
Session.set('selectList',['delhi','pune','chandigarh']);
Session.set('run',true);
Template.testDynamicSelect.helpers({
selectList:function(){
return Session.get('selectList')
}
});
Template.testDynamicSelect.rendered = function(){
var instance = this;
instance.autorun(function(){
if(Session.get('run')){
var config = {
'.chosen-select': {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
Session.set('run',false);
console.log('run select ');
}
});
}
现在在控制台中,当我输入时
Session.set('selectList',['delhi','pune','chandigarh','bangalore']);
Session.set('run',true);
我没有得到更新值 'bangalore'。
您的 .rendered()
仅在呈现模板时运行一次,它不会对 run
会话变量中的更改做出反应,直到再次呈现模板。
您需要更新模板助手中的菜单,使其对地名数组中的更改做出反应。
如果您检查正确,那么选项标签是动态生成的。但是在jquery multi select中没有动态显示。原因是,即使选项标签是动态生成的,您也没有更新 multi-select 列表。
仔细阅读文档,需要触发更新如下: $(".chosen-select").trigger("chosen:updated");