ractivejs - 当从数据设置输入值时触发 onchange 事件

Question

我一直在研究许多双向数据绑定(bind)库，但到目前为止还没有找到一个可以在根据模型更改设置输入值时触发 onchange 事件的库。有没有办法用 ractive.js 做到这一点？

Answer 1

这是可能的，但有点 hacky。浏览器只会在用户交互时触发 change 事件(而不是 input.value = 'someNewValue')，因此您必须自己观察模型并触发事件:

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: { name: 'world' },
    twoway: false
});

ractive.observe( 'name', function () {
    // name has changed, need to simulate an event
    var event = new Event( 'change' );
    ractive.find( 'input' ).dispatchEvent( event );
});

ractive.find( 'input' ).addEventListener( 'change', function ( event ) {
    console.log( 'event was fired', event );
});

// check the console!
ractive.set( 'name', 'everybody' );

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>

<main></main>

<script id='template' type='text/ractive'>
    <h1>Hello {{name}}!</h1>
    <input value='{{name}}'/>
</script>

请注意，双向绑定(bind)已被禁用，否则当用户确实与输入交互时，您会在所有地方触发额外的事件 - 因此您需要监听输入/change 事件并自行处理这些交互。