I'm working on a data audit web applicaton which has a model containing several field sets composed of old value, new value, and current value fields. The current value is a calculated field (by KO terms) which uses fairly trivial logic to decide whether the old or new value should be used for the current value (basically if there is a new value then use it otherwise show the old value). There are about 20 of these field sets to be included in the overall form, and I'd like to avoid having to call `kendo.bind` for all of them individually.
Here's an example of what I'd like to be able to do (and the documentation sort of says should work, but doesn't):
<div id="practiceSection">
<div id="phoneNumber">
<h4>Phone Number</h4>
<span>Display Value:</span>
<input id="displayPhoneNumber" data-bind="value: phoneNumber.DisplayValue"/><br/>
<span>Old Value:</span>
<input id="oldPhoneNumber" data-bind="value: phoneNumber.OldValue"/><br/>
<span>New Value:</span>
<input id="newPhoneNumber" data-bind="value: phoneNumber.NewValue"/><br/>
</div>
</div>​
String.IsNullOrEmpty = function(value) {
var isNullOrEmpty = true;
if (value) {
if (typeof (value) == 'string') {
if (value.length > 0)
isNullOrEmpty = false;
}
}
return isNullOrEmpty;
}
function FieldBlock(oldValue, newValue) {
this.OldValue = oldValue;
this.NewValue = newValue;
this.DisplayValue = function() {
var newValue = this.get("NewValue");
if (String.IsNullOrEmpty(newValue))
return this.get("OldValue");
return newValue;
};
}
kendo.bind($("#practiceSection"), kendo.observable({
phoneNumber: new FieldBlock("111-111-1111", null)
}));
jsfiddle
The code above results in `FieldBlock.DisplayValue` consistently returning undefined. Oddly enough, the dependent method does work if I pass the `FieldBlock` object to `kendo.observable` directly (not as the value of a property of an anonymous object). Here is a jsfiddle showing what does work but also what I'm trying to avoid.
Is this expected behavior? I'm using the 2012.01.322 build.
Also asked here to make sure I've avoided all of the typical non-ninja problems.
Here's an example of what I'd like to be able to do (and the documentation sort of says should work, but doesn't):
<div id="practiceSection">
<div id="phoneNumber">
<h4>Phone Number</h4>
<span>Display Value:</span>
<input id="displayPhoneNumber" data-bind="value: phoneNumber.DisplayValue"/><br/>
<span>Old Value:</span>
<input id="oldPhoneNumber" data-bind="value: phoneNumber.OldValue"/><br/>
<span>New Value:</span>
<input id="newPhoneNumber" data-bind="value: phoneNumber.NewValue"/><br/>
</div>
</div>​
String.IsNullOrEmpty = function(value) {
var isNullOrEmpty = true;
if (value) {
if (typeof (value) == 'string') {
if (value.length > 0)
isNullOrEmpty = false;
}
}
return isNullOrEmpty;
}
function FieldBlock(oldValue, newValue) {
this.OldValue = oldValue;
this.NewValue = newValue;
this.DisplayValue = function() {
var newValue = this.get("NewValue");
if (String.IsNullOrEmpty(newValue))
return this.get("OldValue");
return newValue;
};
}
kendo.bind($("#practiceSection"), kendo.observable({
phoneNumber: new FieldBlock("111-111-1111", null)
}));
jsfiddle
The code above results in `FieldBlock.DisplayValue` consistently returning undefined. Oddly enough, the dependent method does work if I pass the `FieldBlock` object to `kendo.observable` directly (not as the value of a property of an anonymous object). Here is a jsfiddle showing what does work but also what I'm trying to avoid.
Is this expected behavior? I'm using the 2012.01.322 build.
Also asked here to make sure I've avoided all of the typical non-ninja problems.