jquery - Issue structuring JavaScript (separation of view and model logic) -

-

i'm working on javascript-heavy piece (using jquery) website (at moment, i'm working on getting prototype going).

to summarize i'm doing, have series of 'icons'. each icon, @ moment, image. have series of 'buckets'. icons start in single bucket. user able create new buckets , drag icons around bucket bucket. icons can turned on , off clicking on them (although still remain in bucket).

i have working fine @ moment, @ moment it's bunch of img elements getting moved around div div. when i'm ready start implementing server-side logic, i'm going need way communicate what's going on server.

what need 'model' object reflecting what's going on view. it'd if when user ready send data server, i'd have object serialize representing need. example, if user has dragged email.png icon bucket options bucket, reflected in model object (i.e. { 'options': ['email'] }).

the issue is, logic occurring based on events. when user drags icon div, event fired on img dom element, i'm not sure how access it's model update it. thing can think of parsing img src , use find out name of model option that's hackish , inelegant solution.

any ideas?

you maintain raw object model or graph of objects attaching root object in dom, or alternatively using jquery data system keep in.

even reference ui dom elements centralized model reduce complexity of 2 distinct models.

it's not uncommon jquery plugins centralize state in manner seek, inside jquery data system.

raw javascript

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

or jquery data system (same idea)

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

effectively creates manageable model in 1 place (that choose design of) - represents state of icons, buckets , else; can serialized using json , sent server through ajax call; , ui elements can rebuilt/refreshed it.

this idea comes cost of indirection , effort of keeping synchronized raw model ui model.


Comments

Post a Comment

Popular posts from this blog

objective c - Change font of selected text in UITextView -

-
can suggest me how change font of selected text in uitextview.i cannot use uiwebview since have edit text. have seen pages app.how possible in app. see formatting text within uilabel differently . since need editing, should @ javascript-based editors such ckeditor or tinymce . highly recommend wwdc 2011 video session 511: "rich text editing in safari on ios."
Read more

php - Accessing POST data in Facebook cavas app -

-
so i've got simple form in canvas / iframe facebook app, , i'm trying pass along values post. reading on s.o. , fb's latest docs, understand it, data send via post form can accessed on receiving end $_request object. i read on thread on s.o. in order post forms work need pass along input named "signed_request" value current signed_request (i have signed request working ok otherwise...all login , authentication stuff working fine). isnt mentioned anywhere in official fb docs. so problem comes in $_request object signed request, , bunch of other session stuff. form inputs found. the way can read them set method of form "request" isn't real form method. takes of inputs , sends them args in url. horrible. here's sample page canvas app form i'm using try debug (leaving out authentication stuff): <form enctype="application/x-www-form-urlencoded" method="post" target="_top" id="my_form" action=...
Read more

c# - Getting control value when switching a view as part of a multiview -

-
i have following code in aspx page: <asp:button id="display_button" runat="server" text="display" onclick="button1_click" /> &nbsp; <asp:button id="edit_button" runat="server" text="edit" onclick="button2_click" /> &nbsp; <asp:button id="save_button" runat="server" text="save" onclick="button3_click" visible="false" /> &nbsp; <asp:multiview id="multiview1" runat="server" activeviewindex="0"> <asp:view id="view1" runat="server"> <asp:formview id="view_program" runat="server"> <itemtemplate> <%# eval("status").tostring().trim() %> </itemtemplate> </asp:formview> </asp:view> <asp:view id="view2" runat="server"> ...
Read more