Plugin for reactive to conditionally remove (or reinsert) an element. Order is maintained.
Add an attribute to the element: data-remove="expression"
, where expression
is either a:
- string boolean (
"true"
or"false"
) - model property name
- javascript expression (interpolated).
If thruthy, the element is removed. If falsy, the element is reinserted.
Regarding use together with the each
binding (on the same element): a mutating array will likely cause problems. Either let each
handle element removal (recommended) or use an immutable array.
<p data-remove="false">hey now</p>
<p data-remove="removeMe">hey now</p>
<p data-remove="{ name == 'hank'}">removed</p>
var reactive = require('reactive')
, rm = require('reactive-rm')
var model = {
name: 'hank',
removeMe: function() { return false }
}
reactive(template, model, {
bindings: {
'data-remove': rm.binding
}
})
Note, the standard method for loading plugins, view.use(plugin)
, will not work (currently). This is due to attributes being interpolated by reactive, after which the plugin can't subscribe to changes.
npm i reactive-rm
Then use browserify to bundle for the browser.