don't render feature (directive or otherwise)

[dannyc]

Feature request: Would be nice to have ability to not generate dom elements based on a directive or the data object, instead of generating them and setting display: none. This is the equivalent of "if" statements in other template solutions. For example if I have a button or text field to display only if the logged in user is an admin, I'd prefer to skip the render stage and just move on. Something like:

var activities = [
  {activity: 'Jogging'},
  {activity: 'Gym'},
  {activity: 'Sky Diving', render: false},
];

$('#activities').render(activities);

Would result in:

<ul id="activities">
  <li class="activity">Jogging</li>
  <li class="activity">Gym</li>
</ul>

Or as a directive: Template:

<div class="person">
  <span class="name"></span>
  <a class="email"></a>
</div>

Javascript:

person = {
  firstname: 'Jasmine',
  lastname:  'Taylor',
  email:     'jasmine.tailor@example.com'
};

directives =
  name:  function(element, index) { return this.firstname + " " + this.lastname; }
  email: function(element, index) { return {render: false, href: "mailto:" + this.email}; }
};

$('.person').render(person, directives);

Result:

<div class="person">
  <span class="name">Jasmine Taylor</span>
</div>

Thoughts?

[pyykkis]

Hi @dannyc,

Thanks for the feature request and sorry for the late reply, I've been crazy busy lately. The feature request certainly makes sense. I think it through for a couple of days and come back with some ideas.

Cheers, Jarno

[pyykkis]

Here's how you can do it with directives:

CoffeeScript:

people = [
  civil_id: '123456'
  name:     'Foo Bar'
,
  civil_id: '654321'
  name:     'Fizz Buzz'
]

admin = true

directives =
  civil_id: text: (p) -> $(p.element).remove() unless admin

$('.people').render people, directives

Tempate (in Jade):

ul.people
  li
    span.civil_id
    span.name

Result

<ul class="people">
  <li>
    <span class="civil_id">123456</span>
    <span class="name">Foo Bar</span>
  </li>
  <li>
    <span class="civil_id">654321</span>
    <span class="name">Fizz Buzz</span>
  </li>
</ul>

Civil ID field can be toggled on/off by setting admin to true or false.