loading two identical < display two records in a row >inside two <td's>

Tom

unread,

Jun 23, 2009, 5:45:09 AM6/23/09

to PURE Unobtrusive Rendering Engine for HTML

Hello Pure team,

Thanks a lot & i commend the efforts behind the templating engine. I
just love the speed at which it renders( i'm a big fan of compile &
render functions...) And also special thanks to Mic, for assisting me
out in previous queries in this forum.

I'm stuck at a point, in displaying the json data in a required style
at UI. < display two records in a row >
...
"languages":[
{"name":"English","class":"EN", "value":01},
{"name":"Chinese", "class":"CH", "value":02},
{"name":"Italian", "class":"IT", "value":03},
{"name":"Japanese", "class":"JPN", "value":04},
{"name":"French", "class":"FR", "value":05},
{"name":"German", "class":"DE", "value":06}
],
...

and i need to display in UI as two records in a row

English Chinese
Italian Japanese
French German
... ...

I guess i'm going wrong somewhere on the directives.

directive = {
'tbody' : 'data<-resultList',
'tbody tr' : 'language<-data.languages',
'tbody tr td[class]' : function(obj){ // to align left or right
var leftRight = (obj.pos % 2 == 0) ? 'left' : 'right';
console.log(" obj.pos : " + obj.pos + ", leftRight : " +
leftRight);
return leftRight;
},
'tbody tr td' : 'language.name',
};

I've pasted my entre code at http://friendpaste.com/1a9VFdl9cnWkTwCfivlJnp

I can get one rowListing for a row, but i need two records in a row..

Am i going wrong with the basics..??? i believe it has to be
something with my directives definition.
Appreciate your help in advance..!

Thanks
Tom!

Mic Cvilic

unread,

Jun 23, 2009, 7:14:58 AM6/23/09

to Pure-Unobtrusive...@googlegroups.com

Hi Tom,

You could loop on TR and inject double TD strings but this is frankly ugly.
I would use UL/LI's instead to get the same result.

<style>
li{ float:left;width:50% }
ul{ list-style-type:none }
</style>

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>

Thomas de Bodt

unread,

Jun 23, 2009, 11:17:22 AM6/23/09

to Pure-Unobtrusive...@googlegroups.com

Hi Tom,

Why not using a simple jQuery script like the following and render all the td in a unique row? Clean and easy.
PS: I created the render method to simulate pure render() call.

<script type="text/javascript">
jQuery(function($){
    $.fn.extend({
        arrange: function() {
            return this.each(function() {
                var n = $('th', this).size();
                var $tbody = $('tbody',this);
                var $tr = $('tr', $tbody);
                $('td',$tr).each(function(i) {
                    if (i !== 0 && !(i % n)) {
                        $tr = $('<tr/>').appendTo($tbody);
                    }
                    $tr.append(this);
                });
            });
        },
        render: function() {
            return this;
        }
    });

    $('.arrange').render().

arrange();
});
</script>

</head>
<body>
    <div id="myDiv">
        <table class="arrange">
            <thead style="display:none">
                <th>column1</th>
                <th>column2</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Tom

unread,

Jun 23, 2009, 8:58:55 PM6/23/09

to PURE Unobtrusive Rendering Engine for HTML

Thanks Mic & Thomas... for your replies...

I tried the way suggested by Mic.

And it worked beautifull.. updated my code at http://friendpaste.com/1a9VFdl9cnWkTwCfivlJnp,
if anyone wants to refer...

Thanks Again!
Tom

On Jun 23, 8:17 am, Thomas de Bodt <tdeb...@gmail.com> wrote:
> Hi Tom,
>
> Why not using a simple jQuery script like the following and render all the
> td in a unique row? Clean and easy.
> PS: I created the render method to simulate pure render() call.
>
> <script type="text/javascript">
> jQuery(function($){
> $.fn.extend({
> arrange: function() {
> return this.each(function() {
> var n = $('th', this).size();
> var $tbody = $('tbody',this);
> var $tr = $('tr', $tbody);
> $('td',$tr).each(function(i) {
> if (i !== 0 && !(i % n)) {
> $tr = $('<tr/>').appendTo($tbody);
> }
> $tr.append(this);
> });
> });
> },
> render: function() {
> return this;
> }
> });
>

> $('.arrange').render().arrange();});

Reply all

Reply to author

Forward