Here is fiddle jsfiddle.net/jw7Je
I have a view model bounded to a two templates and an editable form in a single page.
The two templates are initially loaded with sample data, The form is displayed without sample data through this custom binding
ko.bindingHandlers.emptyInit = {
init: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext)
{
element.value = '';
}
}
<input type="text" data-bind="value: jw_fullname, valueUpdate: 'afterkeydown', emptyInit: emptyInit" placeholder="Full Name" id="jw_fullname" />
Everything loads up fine initially, but the i have sortable sections of forms through knockout sortable.
<div data-bind="sortable: data">
<div class="item">
<p class="span6">
<label>Course Name</label>
<input type="text" data-bind="valueWithInit: jw_educname, valueUpdate: 'afterkeydown',emptyInit: jw_educname" placeholder="Course Name" class="educname" />
</p>
<p class="span6">
<label>Institution Name</label>
<input type="text" data-bind="value: jw_eduiname, valueUpdate: 'afterkeydown', emptyInit: jw_eduiname" placeholder="Insitution Name" class="eduiname" />
</p>
</div>
</div>
After the user make the change to the form and sorts the elements, the corresponding elements values resets to empty again, although the values in the view model are updated.
How to retain the updated values in those textboxes in sortable sections ?
I am trying with
ko.bindingHandlers.emptyInit = {
init: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext)
{
var value = ko.utils.unwrapObservable(valueAccessor()) || '';
if (element.value !== value) {
element.value = value;
}else {
element.value = '';
}
},
update: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext)
{
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
//console.log(valueUnwrapped);
}
}
