librelist archives

« back to archive

Re: JsonSelect UI Binding

Re: JsonSelect UI Binding

From:
Jonathon Blackford
Date:
2012-06-19 @ 02:29
>
> Hi team JsonSelect,
>
> Love your work. I love your view that css style selectors are the most
> logical simple query language in the javascript world.
>
> I was wondering whether you'd be interested in kicking off another project
> that is very closely related... a javascript data binding library.
>
> Knockout and Angular are a nice start, but they require learning too much,
> changing too much, and writing too much. It would be great to see something
> like what is below.
>
> I leave this here almost without comments or documentation. If the design
> approach is correct, it should all make sense on its own.
>
> <html>
>     <head>
>         <title>JSONSelect Binder Test</title>
>         <script type="text/javascript" src="JSONSelectBinder.js"></script>
>         <script type="text/javascript">
>
>             var animator = function (eventType, el) { el.toggle(400); };
> //called after a new item is added to a collection, or before an item is
> removed
>             var dateToString = function (value, cancel) { return value; };
> //called before rendering the model to the UI
>             var stringToDate = function (value, cancel) { return value; };
> //called before updating the model from the UI
>             var errorHandler = function (error) { };
>             var addBand = function () { bandList.push($("#newBand >
> .bandName").val()); };
>             var removeBand = function (bandName) { bandList.pop(bandName);
> };
>
>             var bandList = [];
>             bandList.bindCss(".band"); //consider the first identified
> instance of the .band class to be representative of an element in the
> bandList collection
>             bandList.bindCss(".band > .member", ".members", animator);
> //use the existing bindings to decode this baby
>             bandList.bindParser(".members > .birthDate", dateToString,
> stringToDate);
>             bandList.bindUrl("/updateBands", errorHandler);
>             //the .band and .member classes would probably have a
> 'display:none' attached by default in the page's associated stylesheet.
>
>         </script>
>     </head>
>     <body>
>         <ul>
>             <li class="band" onclick="removeBand('{bandName}')">
>                 {bandName}<br />
>                 <ul>
>                     <li class="member">{personName} (born on <input
> value="{birthDate}" />)</li>
>                 </ul>
>             </li>
>         </ul>
>         <div id="newBand">
>             <input class="bandName" /><input type="button"
> onclick="addBand()" value="Add Band" />
>         </div>
>     </body>
> </html>
>