我正在尝试使用knockout viewmodel管理项目列表。用户需要能够更改项目的顺序，因此我使用kendo可排序小部件来提供此功能。我也使用淘汰赛选择允许用户选择每个项目的类型。当我将可排序功能添加到列表时，选择停止工作。
这个小提琴演示了这个问题： http://jsfiddle.net/pcbliss/sL12srnu/1/
function item(i) {
var self = this;
self.Type = ko.observable(i.Type || 0);
self.Name = ko.observable(i.Name || "New item");
}
function itemType(it) {
var self = this;
self.TypeId = ko.observable(it.TypeId || 0);
self.TypeName = ko.observable(it.TypeName || "");
}
function ItemViewModel() {
var self = this;
self.items = ko.observableArray([]);
self.itemTypes = ko.observableArray([]);
}
var model = new ItemViewModel();
model.items.push(new item({
Type: 1,
Name: "Item 1"
}));
model.items.push(new item({
Type: 2,
Name: "Item 2"
}));
model.items.push(new item({
Type: 1,
Name: "Item 3"
}));
model.itemTypes.push(new itemType({
TypeId: 1,
TypeName: "Type A"
}));
model.itemTypes.push(new itemType({
TypeId: 2,
TypeName: "Type B"
}));
ko.applyBindings(model);
$("#binding-sample-sortable").kendoSortable({
handler: ".handler",
ignore: "input",
axis: "y",
cursor: "move",
placeholder: function(element) {
return element.clone().css({
"opacity": 0.3,
"border": "1px dashed #000000"
});
},
hint: function(e) {
return $('<div class="modifier-hint modal-lg"><table class="table table-hover table-condensed edit-modifiers" style="margin-left: 0px;"><tbody><tr class="sortable-hint">' + e.html() + '</tr></tbody></table></div>');
}
}); #binding-sample {
width: 500px;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#binding-sample-sortable {
width: 500px;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
.handler {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 3px 0 0 3px;
background: url('../content/web/sortable/handle.png') no-repeat 50% 50% #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="binding-sample" data-bind="foreach: items">
<div>
<select class="form-control" name="TypeList" data-bind="options: $parent.itemTypes, value: Type,optionsText: 'TypeName', optionsValue: 'TypeId', optionsCaption: 'Select'"></select>
<input data-bind="value: Type" />
<input data-bind="value: Name" />
</div>
</div>
<div id="binding-sample-sortable" data-bind="foreach: items">
<div> <span class="handler"> </span>
<select class="form-control" name="TypeList" data-bind="options: $parent.itemTypes, value: Type,optionsText: 'TypeName', optionsValue: 'TypeId', optionsCaption: 'Select'"></select>
<input data-bind="value: Type" />
<input data-bind="value: Name" />
</div>
</div>
有关如何解决此问题的任何建议？
作为奖励，如何在拖动操作期间让编辑字段显示其值？
答案 0 :(得分：0)
function item(i) {
var self = this;
self.Type = ko.observable(i.Type || 0);
self.Name = ko.observable(i.Name || "New item");
}
function itemType(it) {
var self = this;
self.TypeId = ko.observable(it.TypeId || 0);
self.TypeName = ko.observable(it.TypeName || "");
}
function ItemViewModel() {
var self = this;
self.items = ko.observableArray([]);
self.itemTypes = ko.observableArray([]);
}
var model = new ItemViewModel();
model.items.push(new item({
Type: 1,
Name: "Item 1"
}));
model.items.push(new item({
Type: 2,
Name: "Item 2"
}));
model.items.push(new item({
Type: 1,
Name: "Item 3"
}));
model.itemTypes.push(new itemType({
TypeId: 1,
TypeName: "Type A"
}));
model.itemTypes.push(new itemType({
TypeId: 2,
TypeName: "Type B"
}));
ko.applyBindings(model);
$("#binding-sample-sortable").kendoSortable({
handler: ".handler",
ignore: "select",
axis: "y",
cursor: "move",
placeholder: function(element) {
return element.clone().css({
"opacity": 0.3,
"border": "1px dashed #000000"
});
},
hint: function(e) {
return $('<div class="modifier-hint modal-lg"><table class="table table-hover table-condensed edit-modifiers" style="margin-left: 0px;"><tbody><tr class="sortable-hint">' + e.html() + '</tr></tbody></table></div>');
}
}); #binding-sample {
width: 500px;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#binding-sample-sortable {
width: 500px;
margin: 5px;
padding: 5px;
border: 1px solid black;
}
.handler {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 3px 0 0 3px;
background: url('../content/web/sortable/handle.png') no-repeat 50% 50% #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="binding-sample" data-bind="foreach: items">
<div>
<select class="form-control" name="TypeList" data-bind="options: $parent.itemTypes, value: Type,optionsText: 'TypeName', optionsValue: 'TypeId', optionsCaption: 'Select'"></select>
<input data-bind="value: Type" />
<input data-bind="value: Name" />
</div>
</div>
<div id="binding-sample-sortable" data-bind="foreach: items">
<div> <span class="handler"> </span>
<select class="form-control" name="TypeList" data-bind="options: $parent.itemTypes, value: Type,optionsText: 'TypeName', optionsValue: 'TypeId', optionsCaption: 'Select'"></select>
<input data-bind="value: Type" />
<input data-bind="value: Name" />
</div>
</div>