DynBack

Problem

Currently I am doing Asp.Net Mvc project with several independant and pretty reusable parts. What I’d like to achieve (it’s mostly online brain process), is some method, approach to create such controls, that would:

1. Connect to each other through events
2. Use one time loaded template to render itself
3. Use no duplication in code
4. Easy installed every where

I’ve already made part of this things, so I’d like to select an aim for this series of tutorials.

Example

I’d like to take one example: Comment Add and Comment List.

Example, shows Add and List part layout.

It works in next 3 steps.

1. List loads already maded comments
2. Somebody writes comment and clicks “add comment”
3. Comment saved on server, and showed upper in the comment list

General client/service design

Uml case/sequence diagram shows how service works

Is this cool to make classes?

I like “classes” in JavaScript or object with prototype. What pros I see:

1. All in one place, all in one scope. We could use something like namespaces in OOP languages.
2. We could reuse some code, by extending object (like polimorphism - in jQuery $.extend method)
3. Fields encapsulation possible, but I didnot use it anywhere. As for me no sense to use it in dynamic languages, without Intellisense. Code became bigger and ugly.
4. Independent scope for local variables. Every object has own.
5. Its psychologicly better, yes - functions and global variables with prefixes can do mostly the same, but it simply looks better.

For current example task, we need such class structure - init and methods.

    var CommentAdd = function(mod) { //init object fields and use params
         this.mod = mod;
    }
 
    CommentAdd.prototype = {
        add: function(e) {
        }
    }
 
    var CommentList = function(mod) { //init object fields and use params
         this.mod = mod;
    }
 
    CommentList.prototype = {
        refresh: function() {
        }
    }

See John Resig book “Pro JavaScript techniques” for another notations of creating JavaScript classes.

How we should use this outside blackbox?

What I’d like to imagine, is ideal model how two controls should operate between each other. I’ve mentioned before, that this should be maded with events style.

        var list = new CommentList(".comment.list"); 
        // string points to container module, where we will create all html
        var add = new CommentAdd(".comment.add"); 
 
        add.mod.bind("add", function(e, json) { 
            // json object returned after service respond
            list.data.push(json); // add this json to list
            list.refresh(); // refresh list
        })

So what happened? We create two classes, and made event on “add comment” button. This event adds json object to list of all loaded comments and refresh list. I know, you have much questions, when who loads comments here, what is add.mod and how binds work, and what it binds. All this in next parts.

Result for first part

Ok. So now we have our aim (comment control), we know that this would be 2 “classes”, and we know how our classes should work with out world - our service. In next part i’d like to say a bit, about implementation on server side. And next will see.

Literature:

Pro JavaScript Techniques (Pro)

Tags: JavaScript, Mvc

This entry was posted on Monday, November 24th, 2008 at 6:21 pm and is filed under Widget | . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.