locked
data-win-bind: bind dynamic property like Array.length? function support

    Question

  • I wonder if its possible to bind a dynamic property?

    Lets say I have an array property and want to bind its length property.

    I think the binding should not only work on properties but it should check if the given source property name is a function and then call that with the item itself as "this" so that the function can calculate the binding value.

     

    edit: ok, I have just tested using a function as property and Windows then prints "function()" and the function body as the bound value. I try to monkey patch that behaviour :)

     

    edit2: patched it directly in the binding.js, since the getValue is in a private scope and not exposed to the namespace (which would allow monkey-patching).

    While I do not understand why there is an iteration loop that overrides the previous value I have successfully patched the databinding to accept function parameters to:

    function getValue(obj, path) {
            var item = obj;
            if (path) {
                for (var i = 0, len = path.length; i < len; i++) {
                    var old = obj;
                    obj = obj[path[i]];
                    if (typeof obj === "function") {                    
                        try {
                            obj = obj.call(item);
                        } catch (e) {
                            obj = old;
                        }
                    }
                }
            }
            return obj;
        }
    


    Allows me to do that:

    {
        title: "ebay",
        icon: "images/ebay.png",
    
        count: function() {
            return this.items.length;
        },
    
        items: [
        {
            title: "Auktion 7891728331",
            date: "2011-11-01T12:23:54",
            price: 199.21
        }
        ]
    },


    Using this template:

    <div id="tagTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="win-listview-mediumListIconTextTemplate">
                <div class="win-listview-mediumListIconTextTemplateBackground">
                    <div class="win-listview-mediumListIconTextTemplateLargeText win-itemText" data-win-bind="innerHTML: title WinJS.Binding.oneTime">
                    </div>
                    <div class="win-listview-mediumListIconTextTemplateSmallText win-itemTextTertiary"
                        data-win-bind="innerHTML: count WinJS.Binding.oneTime">
                    </div>
                </div>
            </div>
        </div>


    Is there a reason why such functionality was not implemented in WinJS already, or have I missed it?

    Coming from ruby I like that it treats methods and properties the same and always missed that in java(script).

    But what you think, could this make it into WinJS in the future?

    Also I think the databinding should not print out "undefined" in release mode builds if it cannot resolve a property. It should gracefully just display an empty string in release mode to not confuse the users.

    • Edited by phil_ke Thursday, November 17, 2011 10:01 AM patched it
    Thursday, November 17, 2011 9:27 AM

Answers

All replies