durandal compose - how to use the same module in a loop in different parts of the page - durandal

Question

This is a loop using 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>
But when the module loads and knockout binds to it, the bindings are broken, they don't update the observables in the module? Anyone know why?
The module is a singleton, because in this case I only intend to have one copy of it open at a time.
Can anyone suggest a different way to accomplish this?
Much appreciated.
The module code is quite extensive, so here is it is with just activate, I stripped out the other functions:
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);
})
);
}
};
Here is the module HTML, these bindings don't work, the values load but when you lose focus they don't update the observables anymore:
<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>

Answer 1

It turns out that the jquery sortable/draggable functions disable the onmousedown event!
The solution I found was to disable drag/drop once one was selected, until it is saved, then re-enable drag and drop.