问题:
当在嵌套在使用 knockout with
数据绑定(bind)的元素下的 jQuery 对话框上使用时,select2 jQuery 插件不起作用。删除 with
绑定(bind), select2 工作正常。如果 with
绑定(bind)到嵌套属性,那么它将停止工作。
背景:
所以我一定已经奋斗了 3 个小时的最佳部分,试图让 select2 在 jQuery 对话框表单上工作......谈论 pi$$ing 众所周知的错误树,我认为这纯粹是 jQuery 对话框,选择2。它可能从一开始就通过 _allowInteraction
修复起作用。直到我将问题分解为简单的步骤,原因才开始显现出来。问题出在 with
绑定(bind)上。
免责声明
抱歉,我为一家阻止 jsFiddle 的愚蠢公司工作。此外,出于说明目的,我还分解了我的实现,因为实际模型相当大。
// 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不起作用。
最佳答案
当您使用 Knockout 时,强烈建议将外部库(例如 select2)包装在绑定(bind)中。虽然您只初始化它们一次,但诸如 with
之类的绑定(bind), template
或foreach
之后可以随时修改 DOM。
您面临以下任一危险
- 当 Knockout 尚未渲染任何内容时过早初始化 select2,或者
- Knockout 丢弃并在稍后重新渲染标记,以便您的 select2 突然不再绑定(bind)
例如,当 Department.selectedTeam
时就会发生这种情况已更改。
我从 Knockouts' rniemeyer himself here 中发现了一个快速而肮脏的 select2 绑定(bind)。除此之外,我只将 select2 标记更改为标准 <select>
并制作MainModel.department
为了一致性和安全性,将其转换为适当的可观察值。
ko.bindingHandlers.select2 = {
init: function(element, valueAccessor) {
var options = ko.toJS(valueAccessor()) || {};
setTimeout(function() {
$(element).select2(options);
}, 0);
}
};
// models
function Department() {
this.name = ko.observable('dept1');
this.selectedTeam = ko.observable( new Team() );
};
function Team() {
this.name = ko.observable('team1');
this.values = ["red", "grey", "blue"];
this.selected = ko.observableArray(["blue"]);
};
function MainModel() {
this.department = ko.observable( 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);
}
});
select {
width: 200px;
}
<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().selectedTeam">
<select data-bind="options: values,
selectedOptions: selected,
select2: { placeholder: 'pick some colors' }">
</select>
</fieldset>
</div>
关于jquery - jQuery 对话框中的 Knockout 'with' 绑定(bind)和 select2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30274293/