Knockout.js Template not updating UI binding on a dependantObservable - templates

Question

The application is written using ASP.NET MVC 3 in vs2010.
I have a knockout template that updates some css and visible bindings using a
dependantObservable.
The issue ONLY occurs when I bind the
value of the select element to the
IntervalID. If this is not bound the
UI is updated as expected.
I have ripped the code out from my main app and created a sample page that does the same binding using standard markup and also templates.
The dependantObservable is called HasChanged.
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.2.0.js" type="text/javascript"></script>
<div data-bind="template: { name: 'intervalTemplate', for:viewModel }">
</div>
<h2>
Not Template</h2>
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
<script id="intervalTemplate" type="text/html">
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
<h2>Template</h2>
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
</script>
<script type="text/javascript">
function IntervalModel(data) {
var _this = this;
_this.IntervalID = ko.observable(data.IntervalID);
_this.Start = ko.observable(data.Start);
_this.End = ko.observable(data.End);
_this.IntervalTypeID = ko.observable(data.IntervalTypeID);
_this.OriginalStart = ko.observable(data.Start);
_this.OriginalEnd = ko.observable(data.End);
_this.OriginalIntervalTypeID = ko.observable(data.IntervalTypeID);
_this.HasChanged = ko.dependentObservable(function () {
return !(_this.OriginalStart() == _this.Start() &
_this.OriginalEnd() == _this.End() &
_this.OriginalIntervalTypeID() == _this.IntervalTypeID());
});
}
var viewModel;
$(function () {
var viewModel = {};
viewModel = new IntervalModel({ IntervalID: 1, Start: "09:00", End: "10:00", IntervalTypeID: 2 });
ko.applyBindings(viewModel);
});
</script>
Any help would be much appreciated... I need to use templates as i have lots of these intervals that need to be displayed.
Thanks!

Answer 1

There is an issue logged on github for this one here: https://github.com/SteveSanderson/knockout/issues/133
The issue centers around using numbers for the value of a select option. When a select element uses the value binding, it is updated with the actual value of the element, which is always a string. So, if your observable is 2, it gets set to "2" when the binding is set up. This change seems to cause an issue with any bindings that use that observable that were set up in the template prior to the select element.
So, until this is potentially fixed, you can make it work by passing IntervalTypeID as a string ("2"). An easy way to convert a number to string is to do yourvalue + ''.
Here it is working:
http://jsfiddle.net/rniemeyer/uDSFa/