Question

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>​ 

And the javascript:

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, or am I missing something simple? I’m using the 2012.01.322 build.

If I’m not missing something is there anything I can do to make this work in Kendo UI (note that I’m not a js ninja, so editing their code is not a likely option)? Perhaps there is a better way to achieve this behavior?

_{Hoping that by double posting this question to a community I trust, I might get a more active response}

Answer 1

I ended up finding a workaround (it works but I don’t think it’s really a solution). Maybe someone with more javascript experience can provide pointers on how to clean it up. jsfiddle

It appears the problem is that my dependent method was returning undefined because I was using this.get("oldValue") when I should have been using this.get("phoneNumber.oldValue"). It seems to be a scoping issue. In order to handle the fieldName portion to be passed to get I take it in as a parameter to my function object like so:

function FieldBlock(oldValue, newValue, fieldName) {
    this.OldValue = oldValue;
    this.NewValue = newValue;

    this.DisplayValue = function() {
        var newValue = this.get(fieldName + ".NewValue");
        if (String.IsNullOrEmpty(newValue))
            return this.get(fieldName + ".OldValue");

        return newValue;
    };
}

kendo.bind($("#practiceSection"), kendo.observable({
    phoneNumber: new FieldBlock("111-111-1111", null, "phoneNumber"),
    faxNumber: new FieldBlock("999-999-9999", null, "faxNumber")    
})); 

Like I said, this seems very dirty but it does work. I’m not quite sure yet how I’ll handle another level of nesting when it becomes required but at least I know what the problem is.

---

Received confirmation from Atanas of Telerik that it is in fact a bug:

Hello, Thank you for the clarification. I confirm that this is a bug.
The “this” context is wrong when there are nested view models. In your
example “this” should be the “phone” object but it is “viewModel”.

I landed a fix which will be part of the next official release. Until
then you can use the workaround which you have found.

Thank you for reporting this issue.

Regards,
Atanas Korchev
the Telerik team

Hopefully it’ll be fixed by the time others start to adopt their MVVM solution.