Problem:
当在嵌套在使用knockout with
数据绑定的元素下的jQuery对话框上使用时,select2 jQuery插件不起作用 . 删除 with
绑定,select2工作正常 . 如果 with
绑定到嵌套属性,则它将停止工作 .
Background:
因此,我必须在3小时内努力争取让select2在jQuery对话框表单上工作....讨论关于这个谚语错误树的问题,我认为它纯粹是jQuery对话框和select2 . 它可能从一开始就使用 _allowInteraction
修复 . 直到我把问题直接解决为简单的步骤,并且因为开始显露自己 . 问题在于 with
绑定 .
Disclaimer
当我为阻止jsFiddle的asinine公司工作时道歉 . 此外,由于实际模型非常大,我为了说明目的而细分了我的实现 .
// models
function Department() {
this.name = ko.observable('dept1');
this.selectedTeam = ko.observable( new Team() );
}
function Team() {
this.name = ko.observable('team1');
}
function MainModel() {
this.department = new Department();
this.showTeam = function() {
$('#addTeamDialog').dialog('open');
};
}
// setup
ko.applyBindings( new MainModel() );
$('#addTeamDialog').dialog({
// fix allow select2 to work on the jq dialog
_allowInteraction: function (event) {
return !!$(event.target).is(".select2-input") || this._super(event);
}
});
$('#someList').select2({
data: [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
]
});
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<button data-bind="click: showTeam">Add Team</button>
<div id="addTeamDialog">
<fieldset data-bind="with: department">
<div class="lite-dialog-field">
<div class="label">
<span data-bind="text: name"></span>
</div>
<div class="field">
<input type="hidden" id="someList" />
</div>
</div>
</fieldset>
</div>
删除 fieldset
上的 data-bind
和select2工作正常 .
当 fieldset
上的 data-bind
设置为 department
时,select2正常工作 .
当 fieldset
上的 data-bind
设置为 department.selectedTeam
时,select2不起作用 .
1 回答
使用Knockout时,强烈建议在绑定中包装select2等外部库 . 虽然您只初始化它们一次,但是
with
,template
或foreach
等绑定可以在此之后的任何时间修改DOM .你也面临着危险
当Knockout尚未渲染任何内容时,
过早地初始化select2,或者
淘汰并在稍后重新渲染标记,以便你的select2突然不再被绑定
例如,更改
Department.selectedTeam
时会发生这种情况 .我've found a quick and dirty select2 binding from Knockouts' rniemeyer himself here . 除此之外,为了一致性和安全性,我只将select2标记更改为标准
<select>
并将MainModel.department
变为适当的可观察对象 .