Issue structuring JavaScript (separation of view and model logic)

Question

I'm working on a Javascript-heavy piece (using jQuery) for a website (at the moment, I'm working on getting a prototype going).

To summarize what I'm doing, I have a series of 'icons'. Each icon, at the moment, is an image. I also have a series of 'buckets'. The icons all start in a single bucket. The user is able to create new buckets and drag the icons around from bucket to bucket. The icons can also be turned on and off by clicking on them (although they still remain in their bucket).

I have it all working fine at the moment, however at the moment it's basically a bunch of img elements getting moved around from div to div. When I'm ready to start implementing the server-side logic, I'm going to need a way to communicate what's going on to the server.

What I need is a 'model' object reflecting what's going on with the view. It'd be good if when the user is ready to send the data back to the server, I'd have an object I could serialize representing what I need. For example, if the user has dragged the email.png icon into bucket the Options bucket, I would like for this to be reflected in a model object (i.e. { 'options': ['email'] }).

The issue is, all my logic is occurring based on events. When the user drags the icon to a div, an event is fired on the img DOM element, from which I'm not sure how to access it's model to update it. The only thing I can think of is parsing the img src and use that to find out the name of the model option but that's a very hackish and inelegant solution.

Any ideas?

John K · Accepted Answer · 2011-04-29 06:04:32Z

You could maintain a raw object model or graph of objects by attaching a root object to something in the DOM, or alternatively using the jQuery data system to keep it in.

Even reference your UI DOM elements into this centralized model to help reduce the complexity of two distinct models.

It's not uncommon for jQuery plugins to centralize state in the manner you seek, inside the jQuery data system.

raw JavaScript

document['myObjectGraph'] = {
    first: 1,
    second: 'two,
    images: [
        document.getElementById('img1'),
        document.getElementById('img2')
    ],
    items: [
        'a',
        'b',
        another = { /* building out the model...*/ };
    ] 
};

or jQuery data system (same idea)

jQuery.data(document.body, 'myObjectGraph', {
    first: 1,
    second: 'two,
    images: [
        $('#img1'),
        $('#img2')
    ],
    items: [
        'a',
        'b',
        another = { /* building out the model...*/ };
    ]         
});

Effectively this creates a manageable model in one place (that you choose the design of) - it represents the state of your icons, buckets and anything else; it can be serialized using JSON and sent to the server through an ajax call; and your UI elements can even be rebuilt/refreshed from it.

This idea comes with the cost of extra indirection and effort of keeping synchronized the raw model with the UI model.

nnnnnn · Accepted Answer · 2011-04-29 06:00:13Z

1

Can you use the element's id or class attribute to store the the name of the model? Then you can specify whatever string you want for each instead of trying to go off the src attribute.

answered Apr 29, 2011 at 6:00

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

mu is too short · Accepted Answer · 2011-04-29 06:03:54Z

1

You could just leave the icons in the buckets and then ask the buckets what's in them when you need to talk to the server. As long as the icons have some unique attribute (such as id) to identify them then you could build your model on the fly as needed. Something like this could be used to serialize your buckets:

http://jsfiddle.net/ambiguous/3ufhn/

That will work nicely as long as things stay simple. If things get more complicated then an explicit MVC setup would make things easier and John K's .data approach would come in handy; you could also use a <form> with hidden inputs to track your state.

answered Apr 29, 2011 at 6:03

mu is too short

436k71 gold badges863 silver badges822 bronze badges

2 Comments

NRaf Over a year ago

In hindsight, this seems like it may be a better approach (at least in my current situation). Storing the name in ids, for what I have, is definitely going to lead to a lot less clutter and simpler code.

mu is too short Over a year ago

@NRaf: It really depends on how complex things are. If you have an explicit model then you need to turn things around a bit so that the model is being expressed in the view (i.e. the view is driven by the model's data) rather than the model being implied by the view. Setting up the proper MVC relationships has some overhead but it may be worth the effort. If you start having synchronization issues then it is time for a more formal approach but in a simple case, formal MVC may be over-engineering.

Collectives™ on Stack Overflow

Issue structuring JavaScript (separation of view and model logic)

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related