locked
Returning a WinJS Class to create a chain

    Question

  • Hello All!

    I am trying to create an app Bar class with WinJS.Class.define() method that support chaining for the classes methods like in jQuery. So Far I have the following code:

    //It takes in the DOMElement that contains the App Bar in the constructor. The instance methods sets and gets properties of the appBar. so I can produce:

    var appBar = new appBarUI.appBar(document.getElementById('appBar'));
    
    appBar.showCmds([cmdAdd,cmdEdit]).setSticky(true).show();


    (function(){
        "use strict";
        var  appBar = WinJS.Class.define(
    		function(e) {
    		    this.bar = e.winControl;
    		},
    		{
    		    setSticky: function (e) {
    		        this.bar.sticky=e;
    		        return this;
    		    },
    		    show: function () {
    			this.bar.show();
                    	return this;
                },
                hide: function() {
                    this.bar.hide();
                    return this;
                },
                showCmds: function (obj) {
                    this.bar.showOnlyCommands(obj);
                    return this;
                }
        });
    WinJS.Namespace.define("appBarUI",{
        appBar : appBar
    });
    })();

    I do not feel like it is safe to return "this";

    My question is: Should I be returning "this"? Or is there another way(safer) to do this?

    Thanks,

    samguddy


    • Edited by samguddy Saturday, February 9, 2013 3:10 AM
    Saturday, February 9, 2013 3:08 AM

Answers

  • What you're doing is just fine and is a fairly common pattern actually. It also seems to me to be the safest way to accomplish what you're after in this situation.

    My only other thought would be to try switching from your current pattern of using the object literal notation for your class definition, to the revealing module pattern ... or at least name your anonymous functions -- this will help with immensely debugging (otherwise you'd just see a callstack of anonymous functions). I have a related blog post about the revealing module pattern in WinJS classes here: http://www.gotdibbs.net/blog/2012/11/11/a-skeleton-for-custom-controls-with-winjs/.

    If you want to keep your current pattern and just want to name your anonymous functions, that would make part of your code like this:

    ...
    
    hide: function hide() {
        this.bar.hide();
        return this;
    },
    
    ...

    • Marked as answer by samguddy Saturday, February 9, 2013 4:43 AM
    Saturday, February 9, 2013 4:26 AM

All replies

  • What you're doing is just fine and is a fairly common pattern actually. It also seems to me to be the safest way to accomplish what you're after in this situation.

    My only other thought would be to try switching from your current pattern of using the object literal notation for your class definition, to the revealing module pattern ... or at least name your anonymous functions -- this will help with immensely debugging (otherwise you'd just see a callstack of anonymous functions). I have a related blog post about the revealing module pattern in WinJS classes here: http://www.gotdibbs.net/blog/2012/11/11/a-skeleton-for-custom-controls-with-winjs/.

    If you want to keep your current pattern and just want to name your anonymous functions, that would make part of your code like this:

    ...
    
    hide: function hide() {
        this.bar.hide();
        return this;
    },
    
    ...

    • Marked as answer by samguddy Saturday, February 9, 2013 4:43 AM
    Saturday, February 9, 2013 4:26 AM
  • Thank You for the advise. Did check out your blog and there is an abundance of information on there which I love. Will defiantly be following and bookmarked.
    Saturday, February 9, 2013 4:43 AM