Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Exclude attribute or element if data value is falsey #28

Open
tauren opened this issue Feb 13, 2012 · 0 comments
Open

Exclude attribute or element if data value is falsey #28

tauren opened this issue Feb 13, 2012 · 0 comments

Comments

@tauren
Copy link
Contributor

tauren commented Feb 13, 2012

Description

I think there needs to be a way exclude tags and attributes from the generated HTML if the data value it is mapped to is false.

For instance, if you want to include checked="checked" from a checkbox input based on if a data value done is true or false. This is currently not possible in Plates (if it is, please show me how!).

In addition, it would be really nice to exclude an entire HTML tag and its children if a data value is false.

Possible Solution

I've changed this line:

https://github.com/tauren/plates/blob/master/lib/plates.js#L122

To this:

 return newdata ? key + '="' + (newdata || '') + '"' : '';

And it excludes the checked attribute for my simple situation, but I'm concerned it would break other scenarios. Would appreciate any feedback.

Note that I'm unable to push changes to my Plates fork right now (I'm behind a restrictive firewall), but I can push this change tonight and submit a pull request.

Further Details

Consider a typical Todo app. Next to each item in the Todo list is a checkmark to indicate that the item is done. The todo list data might look like this:

var todos = [
  {content:'item one',done:false},
  {content:'item two',done:true)
];

The template to render might look something like this:

 <script type="text/x-plates-tmpl" id="todo">
   <div class="todo">
     <div class="display">
       <input class="check" type="checkbox" />
       <div class="todo-content"></div>
       <span class="todo-destroy"></span>
     </div>
     <div class="edit">
       <input class="todo-input" type="text" value="" />
     </div>
   </div>
</script>

The code to render the template would be similar to this:

var html = $('script#todo').text();

var data = {
  content: 'Todo item',
  done: false
};

var map = Plates.Map();
map.class('todo-content').to('content');
map.class('check').use('done').as('checked');

console.log(Plates.bind(html, data, map));

First of all, the checked attribute doesn't get added if it isn't already in the template. This means the template currently needs to include <input class="check" type="checkbox" checked="checked" />. It looks like this pull request might fix this:
#21

Secondly, there is currently no way to set an attribute value to anything besides a value in the data. So if done is true, then checked="true" would be generated instead of the checked="checked" that I want. I would prefer to not add extra redundant data to my model simply for the templating solution to work.

Lastly, and most importantly, I don't see a way to enable/disable an attribute based on a data value. If done is false, I don't want any checked attribute to appear.

I posted some of this into a gist:
https://gist.github.com/1784972

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant