This is a migrated thread and some comments may be shown as answers.

Nested ViewModel Dependent Methods don't work

4 Answers 310 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 03 Apr 2012, 11:55 PM
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(oldValuenewValue{
    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({
    phoneNumbernew 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.

4 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 04 Apr 2012, 08:44 AM
Hello,

 This is not a supported scenario. Dependent methods should be functions not instances of a function object. You can find more info about dependent methods in this help topic: http://www.kendoui.com/documentation/framework/mvvm/observableobject.aspx 

Regards,

Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 04 Apr 2012, 01:39 PM
I don't think the issue has anything to do with my use of functions to mimic objects (if I understand the unsupported scenario). It is strictly related to having a dependent method on a nested ViewModel. I updated my fiddle to mimic the dependent method and structure that is used in the documentation with exception of adding it as a nested ViewModel:

var viewModel kendo.observable({
    phone{
        OldValue"111-111-1111",
        NewValuenull,
    
        DisplayValuefunction({
            var newValue this.get("NewValue");
    
            if (String.IsNullOrEmpty(newValue){
                return this.get("OldValue");
            }
            
            return newValue;
        }
    }
}); 

This has the same results. Are you saying that we can't use dependent methods and nested viewmodels together?
0
Matt
Top achievements
Rank 1
answered on 04 Apr 2012, 03:43 PM
I found a workaround. It's pretty dirty though, 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(oldValuenewValuefieldName{
    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({
    phoneNumbernew FieldBlock("111-111-1111"null"phoneNumber"),
    faxNumbernew 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.

Thanks Atanas for your answer. Maybe knowing the solution to this will help the devs figure out a better way to make it work.
0
Atanas Korchev
Telerik team
answered on 04 Apr 2012, 04:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Matt
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Matt
Top achievements
Rank 1
Share this question
or