How to add change binding

[mikeptweet]

I have the following that works OK ...

           template = document.createElement('template')
	template.innerHTML = '<table border=1><tr><td><input type="text"></td></tr></table>'

	  data = { rows:[
		{cells:['one','two','three']},
		{cells:['four','five','six']}
		]
	  }
	  
	   bindings = [ template, {
		rows: [ 'tr', 			
				{cells: '[type="text"]'}
			]
	  } ]

	  outlet = document.body
	  outlet.appendChild(simulacra(data, bindings))

How do I structure the bindings to add a change event to input box?

[gr0uch]

By default, entering input should automatically update the data (in this case, you have discovered a bug! it's been fixed)

To listen to the change event:

const { flow, setDefault, bindEvents } = simulacra
...
{
  cells: [ 'td', {
    value: [ 'input', flow(setDefault, bindEvents({
      change(event, path) { ... }
    })) ]
  } ]
}

I think that also you would need to wrap the value of the cell to output proper HTML:

{
  cells: [ { value: 'one' }, ... ]
}

[mikeptweet]

Thanks for the prompt response ... so this now works, with the exception that the underlying data value is not updated which is what you referred to. I'll log this here as a bug ...

template = document.createElement('template')
template.innerHTML = '

'

data = { rows:[
{cells:[{value:'one'},{value:'two'},{value:'three'}]},
{cells:[{value:'four'},{value:'five'},{value:'six'}]}
]
}

bindings = [ template, {
rows: [ 'tr', {
cells: [ 'td', {
value: [ 'input', function (element, value, previousValue) {
return 'Hi ' + value + '!'
} ]
} ]
}
]
} ]

outlet = document.body
outlet.appendChild(simulacra(data, bindings))

[gr0uch]

If you update to 1.5.7, input changes are propagated automatically, so the change function can be omitted.

[mikeptweet]

OK ... but I want to trap the changes to do some additional processing on the node?

How would I do this?

[gr0uch]

There's the bindEvents helper for that: http://simulacra.js.org/#helper-functions

[mikeptweet]

Sorry for being dense but I am not seeing how this works in my example ... can you take a peek at

https://jsfiddle.net/bnbnnqcy/

and tell me what the code is to trap the change event on all textboxes?

Also, can I prevent a change based on some validation rule?

[gr0uch]

I've updated it: https://jsfiddle.net/bnbnnqcy/2/

Basically you don't have to use the helper functions, you could just use addEventListener directly. They are mostly for convenience and the only advantage of the helper is that it's slightly more declarative and it handles removing event listeners automatically.

[mikeptweet]

sweet ... thanks.

Now if we could just get it to flow the updates back to the data object, I'd be all set :-)

[gr0uch]

Sure, it just adds one line: https://jsfiddle.net/bnbnnqcy/3/

[mikeptweet]

Awesome ... thanks for all your help