Nested ViewModel Dependent Methods don't work

5 posts, 0 answers
  1. Matt
    Matt avatar
    3 posts
    Member since:
    Oct 2011

    Posted 03 Apr 2012 Link to this post

    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.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 04 Apr 2012 Link to this post

    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!
  3. Matt
    Matt avatar
    3 posts
    Member since:
    Oct 2011

    Posted 04 Apr 2012 Link to this post

    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?
  4. Matt
    Matt avatar
    3 posts
    Member since:
    Oct 2011

    Posted 04 Apr 2012 Link to this post

    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.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 04 Apr 2012 Link to this post

    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!
Back to Top