Blog For .NET

I needed an easy way to move a singleton chunk of HTML around the page.  More specifically i needed to insert an event driven piece of HTML into the telerik rad tree view node.  All i needed to do was, 1. create a DIV, the template,  that i could move into other elements. 2. Create one hidden DIV to store the template when it isn’t being shown.  Javascript is pretty slick sometimes, er, atleast it works well for things like managing the DOM!  The few lines of code show the power of this control.

When you want to move the template around you can use the following methods.
Usage

//inserts the template into the content
var contentElement = $get("conatiner1");
contentElement.appendChild(Samples.Template.get_template());

//inserts the template into the hidden storage container.
Samples.Template.storeTemplate();

One of the nice things is that i can attach eventhandlers onto the elements in the template and they remain after moving the template around the DOM. I’ve only tested this in IE6/7 and FF 2/3, but it works great! Here is the asp.net ajax behavior which lets you manage the template through a singleton object.

The Javascript Object

Type.registerNamespace("Samples");

/////////////////////////
//  base class
////////////////////////
Samples.NodeTemplate = function(storageName, templateName) {
    this._storage = null;
    this._storageName = storageName;
    this._templateName = templateName;
};
Samples.NodeTemplate.prototype = {

    onDisabledChanged: function(disabled) { },

    get_template: function() {
        return $get(this._templateName);
    },

    get_storage: function() {
    ///
    /// returns an element where the template is hidden when not inserted into the tree
    ///
        if (!this._storage) {
            this._storage = $get(this._storageName);
        }
        return this._storage;
    },

    get_disabled: function() {
        return this._disabled;
    },
    set_disabled: function(value) {
        if (this._disabled != value) {
            this._disabled = value;
            this.onDisabledChanged(value);
        }
    },

    storeTemplate: function() {
    ///
    /// Finds the template container by id and returns it to the storage area
    ///
        this.get_storage().appendChild(this.get_template());

    }
};
Samples.NodeTemplate.registerClass('Samples.NodeTemplate');

/////////////////////////
//  Singleton Template class
////////////////////////
Samples._Template = function(storageName, templateName) {
    Samples._Template.initializeBase(this, [storageName, templateName]);
};
Samples._Template.prototype = {

    onDisabledChanged: function(disabled) {
        ///
        /// overridable method to handle any changes required on disabled
        ///
        this.get_iconElement().disabled = disabled;
    },

    get_iconElement: function() {
        //would prolly be best to use a helper method since childnodes '
        //differs on a per browser basis, but works for this example
        return this.get_template().childNodes[0];
    }
};
Samples._Template.registerClass('Samples._Template', Samples.NodeTemplate);
//creating instance with a hardcoded id
Samples.Template = new Samples._Template("storage", "template");

Well, this code is setup to work with a pretty specific use case but the base class can be extended into a wide range of neat DOM manipulation tools. This little template is used to choose a type and submit. A simple use case, when you need to turn a region into edit mode you can use this little guy to act as your singleton edit region. Moving it into place whenever you need to, of course you’ll still have to bind data and wire up event handlers, but that’s another blog. The mark-up below shows it can handle asp.net controls, assuming they don’t change over runtime. it’s also important to note that you’ll need to manage the clientstate, if you need to support postbacks anyways.

The HTML

Two things i really like about this code. 1. The power of code is seen in the usage, the behavior is just an overweight static set of helper methods. 2. This feels good to use. Sure, it could be optimized a ton, but i’m not going to for this blog. 3.Javascript singletons are always interesting.

DOWNLOAD THE EXAMPLE CODE HERE

No Comments yet »