Using the + operator before AND after a '.' iterator - How To

[Robert Chesley]

Greetings

Here is my directive (with the element that I am trying to get working commented out):

 var officersDir = {

        'tr':{

            'officer<-officers':{

                'td':function (arg) {

                    var ret = '';

                    ret = toTitleCase(arg.item.firstname) + ' ' + toTitleCase(arg.item.lastname);

                    return ret;

                },

                '.+':'<td>#{officer.title}</td><td>"% ownership - TBD"</td><td>#{officer.classCode}</td><td>#{officer.payroll}</td>'

                /*'td': function(arg){

                    var ret = '';

                    if (!arg.item.includeFlag) {

                        ret = '<i class="icon-ok"></i>';

                    }

                    return ret;

                }*/

            },

            sort:function (a, b) {

                // sort in ascending first name order (ascii)

                return Date.parse(a.firstname) < Date.parse(b.firstname) ? 1 : -1;

            }

        }

    };

I am rendering to an id so:

<tbody id="officersBody">

   <tr><td></td></tr>

</tbody>

The above renders just fine with the function in the first td and the iterator appending to that correctly.  The difficulty is in appending again another td based on a function return - can't seem to get this working by adding with 'td+' and adding a td to the tr line.

The behavior that I am seeing is several variations of check icon prepended or appended to other rendered tds (like the name column).

Love the library.

Thanks.

Bob

[Mic (BeeBole)]

When you say '.+' the content of the TR is emptied internally.
Then if you have a 'td' selector after it, it does not exist anymore
inside the TR.

Mixing JS with HTML is what we try to avoid with templates.
I would do something like that instead:

var officersDir = {
tr:{
'officer<-officers':{

'td.name':function (arg) {
return toTitleCase(arg.item.firstname) + ' ' +
toTitleCase(arg.item.lastname);
},
'td.title':'officer.title',
'td.ownership':'% ownership -TBD',
'td.classCode':'officer.classCode',
'td.payroll':'officer.payroll',
'i.@style':function(a){
return this.includeFlag ? 'display:none':'';

}
},
sort:function (a, b) {
// sort in ascending first name order (ascii)

return a.firstname < b.firstname ? 1 : -1;
}
}};

Just by curiosity whay are you using Date.parse(firstname) to sort
them?


On Mar 29, 10:55 pm, Robert Chesley <bob.ches...@nhsoftwerks.com>
wrote:

[bche...@b4ugo.com]

Thanks for the example.  I have been relying on the '.' approach to rendering as I learn the library but see the value in avoiding embedded html.

The Date.parse sort was just a cut and paste error not yet modified.

Cheers, 

Bob