Add to existing attribute based on data value

[tauren]

Plates needs a way to enhance an attribute based on a data value, not just replace it with the data value.

For instance, in my Todo app, if a todo item is checked as done, I want to add a CSS class to the div, but I don't want to remove the existing class.

HTML of an uncompleted item {content: 'My Todo Item', done: false}:

<div class="todo-content">My Todo Item</div>

HTML of a completed item {content: 'My Todo Item', done: true}:

<div class="todo-content done">My Todo Item</div>

I'd be happy to implement this and submit a pull request, but welcome any input or suggestions before doing so. Is there already a way to accomplish this?

It seems like there needs to be a way to supply a Map with custom functions so we can better control the output. For instance:

// Function to pass into Plates.Map.use()
// It should be passed the existing attribute value and the data model
function addClass(currentAttr, data) {
  return currentAttr.indexOf('done') === -1 ? currentAttr + ' done' : currentAttr;
}

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

The above will need more work since the use() method does not yet know which attribute it pertains to, since as('class') is chained after it. But I hope it gets the concept across.

[pksunkara]

@nhunzaker Is this similiar to what we are discussing?

[nhunzaker]

@pksunkara Yes, I had been playing around with something similar a few days ago. Basically, I made it so that some of the map methods could be passed functions which would use the returned value instead of the value in the data argument of the bind method.

var data = { foo : "auto" };

map.where("class").is("todo-content").insert(function(data) {
    return data.foo + " complete";
});

I feel like this would be implemented similarly for issue #30 as well.

[tauren]

@nhunzaker Your example looks useful. Do you have this implementation committed in your fork? I browsed through your commits but it wasn't immediately obvious.

[nhunzaker]

@tauren My apologies, it got bundled in with the iteration fixes and I pulled it out. @pksunkara should be working on a similar, permanent solution.

[3rd-Eden]

Closing this, you can now do:

var map = new plates.Map();
map.className('pewpew').use(function render(data, value, tagbody) {
 return 'pewpew' + data.pewpew + value;
});