This is where I've decided to leave it: http://pastie.org/477948
The json-to-element mechanism works for all my purposes so far. I've
included the html-to-json conversion bits as it can be helpfull to
kick start converting large portions of existing html. i have found
that it does not play nice with textnodes and style properties
(neither of which i really miss too much anyway).
The pastie includes a full test page,.. the javascript is included
here for your convenience...
Element.extend({
fromJSON: function(o){
var b = new Element(o.type, o.props);
if (o.kids)
for(var i=0;i<o.kids.length;i++)
b.grab(Element.fromJSON(o.kids[i]));
return b;
}
});
Element.implement({
getJSONProperties: function() {
var r = {};
var t = this.attributes;
for (j=0;j<t.length;j++)
r[t[j].name] = t[j].value;
return r;
},
toJSON: function(){
var b = { type: this.get('tag'), props:
this.getJSONProperties() };
var kids = this.getChildren();
if (kids.length>0) {
b.kids = [];
for(var i=0;i<kids.length;i++)
b.kids.include(kids[i].toJSON());
}
return b;
}
});
If you can optimize this then please post back :]
Hope this helps someone.
Pat.
On May 12, 3:17 pm, electronbender <[email protected]> wrote:
> I see, that's very nice.
> I'm currently using something similar to generate forms from json but
> it's not as elegant as your solution.
> So, when you have something solid, please share!
>
> On May 10, 9:28 pm, patcullen <[email protected]> wrote:
>
> > im working on ideas for ajax'ing assets down to the client. i want to
> > steer interface development into a more pure javascript approach,.. as
> > apposed to downloading some html, then using little scripts to
> > activate the controls. so my goal here is to not transport any layout
> > in pure html at all; but rather use json to transport layout
> > structures.
>
> > { type: 'div',
> > props: { id: 't2' },
> > kids: [
> > { type: 'div',
> > props: { class: 'toolbox divider2' },
> > kids: [
> > { type: 'div', props: { id: 'spinner'
> > } }
> > ]
> > }
> > ]
>
> > }
>
> > would express:
> > <div id="t2">
> > <div class="toolbox divider2">
> > <div id="spinner"></div>
> > </div>
> > </div>
>
> > This is an attempt to create a json representation that is 'lossless'
> > in detail when converting the html. I will in all likeliness try
> > shorthand these json structures into something much lighter using
> > another conversion once i know the limit of html i will be rebuilding
> > on the client and the expressive power of this json format.
>
> > so there it is,.. with all the extra details. as you might guess i
> > don't actually need to serialize the html, but only deserialize it on
> > the client (which i can happily achive),.. but it seems almost
> > incomplete to build the conversion one way without fully building the
> > reverse tool.
>
> > On May 10, 7:32 pm, electronbender <[email protected]> wrote:
>
> > > Wait, can you explain what "jsonizing html" means?
> > > What is the input and what output do you get?
>
> > > On May 8, 4:18 pm, patcullen <[email protected]> wrote:
>
> > > > here is a whole page/test for any willing eyes...
>
> > > >http://pastie.org/472158
>
> > > > On May 8, 4:14 pm, patcullen <[email protected]> wrote:
>
> > > > > hi, im trying to find a practical way of json'izing html... so far i'v
> > > > > put these test functions together:
>
> > > > >http://pastie.org/472149
>
> > > > > they work ok for most simple html i'v thrown at it so far. the primary
> > > > > snag iv found is it doesnt serialize text inside elements... :(
> > > > > i tried $(element).get('text'), but that returns text from all child
> > > > > nodes.
>
> > > > > does anyone have any ideas how to include text-nodes in the
> > > > > serialization? any other comments are welcome.. for all i know i could
> > > > > have tackled this thing the wrong way round altogether.
>
> > > > > cheers.
