这是一个使用knockout sortable的循环：
<div data-bind="sortable: {data: Fields,beforeMove:$root.preOrder,afterMove:$root.saveOrder}">
<div class="item"><a data-bind="text:Name,click:function() {$root.edit(Id());}" style="margin-left:20px;"></a>
<!-- ko if: $root.selectedFieldId()==Id() -->
<!-- ko compose:{model:'tasktype/edittasktype/addedittasktype',activationData:{TaskTypeId:$root.TaskTypeId, Sections:$root.Sections,FieldId:$root.selectedFieldId,Dimensions:$root.Dimensions } } --><!-- /ko -->
<!-- /ko -->
</div>
</div>
但是当模块加载和knockout绑定到它时，绑定被破坏，它们不会更新模块中的observable？谁知道为什么？
该模块是一个单例，因为在这种情况下我只打算一次打开它的一个副本。
有人可以提出不同的方法来实现这个目标吗？
非常感谢。
模块代码非常广泛，所以这里只是激活，我剥离了其他功能：
define(['plugins/http', 'durandal/app', 'knockout', 'plugins/ajax', 'plugins/dynamiccss', 'plugins/utility', 'durandal/global'], function (http, app, ko, ajax, cssLoader, utility,global) {
var vm = {};
vm.selectedFieldTypeId = ko.observable('1');
vm.newFieldName = ko.observable('');
vm.selectedFieldRequired = ko.observable(true);
vm.selectedPrecision = ko.observable(2);
vm.selectedMaxChars = ko.observable(5000);
vm.newSectionName = ko.observable();
vm.selectedSectionId = ko.observable('1');
vm.selectedDimensionId = ko.observable('1');
vm.activate = function (params) {
vm.TaskTypeId = params.TaskTypeId;
vm.Sections = params.Sections;
vm.FieldId = params.FieldId;
vm.Dimensions = params.Dimensions;
$('#addFieldName').focus();
if (vm.FieldId() != '0' && vm.FieldId() != undefined) {
return $.when(
ajax.wrap('TaskType/GetTaskTypeFieldType', { Id: '1' }, function (response) {
if (typeof vm.TaskTypeFieldTypes === 'undefined')
vm.TaskTypeFieldTypes = ko.mapping.fromJS(response.Model);
else
ko.mapping.fromJS(response.Model, {}, vm.TaskTypeFieldTypes);
}),
ajax.wrap('TaskType/GetTaskTypeFieldModel', {Id:vm.FieldId()}, function (response) {
if (typeof vm.FieldModel === 'undefined')
vm.FieldModel = ko.mapping.fromJS(response.Model);
else
ko.mapping.fromJS(response.Model, {}, vm.FieldModel);
vm.FieldId(vm.FieldModel.Id());
vm.selectedFieldTypeId(vm.FieldModel.TaskTypeFieldTypeId());
vm.newFieldName(vm.FieldModel.Name());
if (vm.FieldModel['Required'] != undefined)
vm.selectedFieldRequired(vm.FieldModel.Required());
if (vm.FieldModel['MaxLength'] != undefined)
vm.selectedMaxChars(vm.FieldModel.MaxLength());
if (vm.FieldModel['DimensionId'] != undefined)
vm.selectedDimensionId(vm.FieldModel.DimensionId());
if (vm.FieldModel['TaskTypeSectionId'] != undefined)
vm.selectedSectionId(vm.FieldModel.TaskTypeSectionId());
if (vm.FieldModel['Scale'] != undefined)
vm.selectedPrecision(vm.FieldModel.Scale());
})
);
}
else {
return $.when(
ajax.wrap('TaskType/GetTaskTypeFieldType', { Id: '1' }, function (response) {
if (typeof vm.TaskTypeFieldTypes === 'undefined')
vm.TaskTypeFieldTypes = ko.mapping.fromJS(response.Model);
else
ko.mapping.fromJS(response.Model, {}, vm.TaskTypeFieldTypes);
})
);
}
};
这是模块HTML，这些绑定不起作用，值加载但是当你失去焦点时他们不再更新observable：
<div style="padding-right: 20px; margin-top: 10px; padding-top: 5px; border-top: 1px solid LightGrey; border-bottom: 1px solid LightGrey;">
<span class="span3" style="margin-left:10px;">Field Name</span> <span class="span6"style="margin-left:0px;"><input type="text" id="addFieldName" data-bind="value:$root.newFieldName"></input></span> <span class="span3"><a class="btn icon-ban-circle" data-bind="click:function() {deleteField(FieldId());}"> Delete This Field</a></span>
<br style="clear:both;" />
<span class="span3" style="margin-left:10px;">Section</span> <select data-bind="options:$root.Sections, value:$root.selectedSectionId,optionsText:'Name',optionsValue:'Id'"></select><br />
<span class="span3" style="margin-left:10px;">Field Type</span>
<select title="Field types cannot be edited once set, you must delete and create a new field instead." data-bind="disable:FieldId()!=undefined&&FieldId()!='0',options:$root.TaskTypeFieldTypes, value:$root.selectedFieldTypeId,optionsText:'Name',optionsValue:'Id'"></select>
<br />
<!-- ko if: selectedFieldTypeId() == '2' --><!-- checkbox -->
<span class="span3" style="margin-left:10px;">Required</span> <input type="checkbox" data-bind="checked:$root.selectedFieldRequired" /><br />
<!-- /ko -->
<!-- ko if: selectedFieldTypeId() == '3' --><!-- date -->
<span class="span3" style="margin-left:10px;">Required</span> <input type="checkbox" data-bind="checked:$root.selectedFieldRequired" /><br />
<!-- /ko -->
<!-- ko if: selectedFieldTypeId() == '4' --><!-- text -->
<span class="span3" style="margin-left:10px;">Characters Max Length</span><input type="text" data-bind="value:$root.selectedMaxChars" /><br />
<span class="span3" style="margin-left:10px;">Required</span> <input type="checkbox" data-bind="checked:$root.selectedFieldRequired" /><br />
<!-- /ko -->
<!-- ko if: selectedFieldTypeId() == '5' --><!-- number -->
<span class="span3" style="margin-left:10px;">Precision</span><input type="text" data-bind="value:$root.selectedPrecision" /><br />
<span class="span3" style="margin-left:10px;">Required</span><input type="checkbox" data-bind="checked:$root.selectedFieldRequired" /><br />
<!-- /ko -->
<!-- ko if: selectedFieldTypeId() == '6' --><!-- dropdown -->
<span class="span3" style="margin-left:10px;">Dimension List</span> <select data-bind="options:$root.Dimensions, value:$root.selectedDimensionId,optionsText:'Name',optionsValue:'Id'"></select><br />
<!-- /ko -->
<br /><a class="btn" style="margin-left:10px;" data-bind="click:clear">Cancel</a>
<a class="btn" data-bind="disabled:selectedFieldTypeId() != '1' && newFieldName().length>1 &&selectedSectionId()!='1',click:addField">Save</a>
</div>
答案 0 :(得分：0)
事实证明，jquery可排序/可拖动函数会禁用onmousedown事件！
我找到的解决方案是在选择一个之后禁用拖放，直到保存，然后重新启用拖放。