从数据中设置输入值时触发 onchange 事件答案

【问题标题】：Having onchange event fire when input value set from data从数据中设置输入值时触发 onchange 事件
【发布时间】：2014-12-16 23:32:31
【问题描述】：

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

【问题讨论】：

标签： ractivejs

【解决方案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>

请注意，双向绑定已被禁用，否则当用户确实与输入交互时，您会在各处触发额外的事件 - 所以您需要监听 input/ change 事件并自己处理这些交互。

【讨论】：

至少它是可行的，尽管以双向绑定为代价。如果它只是一个选项，那就太好了，这样 ractive 知道在设置值时会触发更改事件。我将再次阅读有关合成事件的文档，也许我可以让 change 以外的事件运行与 change 事件相同的功能，然后我可以保持双向绑定。我是 SO 新手，所以我不能赞成你的答案，但它给了我一个很好的起点！

【解决方案2】：

答案（出于我的目的）实际上非常简单。首先是一点背景 - 我可能应该在原始问题中概述。假设您正在查看/编辑客户资料。与此同时，其他人也在做同样的事情。他们更新电话号码并重新保存个人资料。如果没有做任何特别的事情，除非您重新加载配置文件，否则您不会看到新手机#。我的目标是让我们的数据/表单“具有反应性”。其中一个困难是更新表格。这本身很容易，但如何处理输入上的任何 onchange 事件。假设一个国家发生了变化，因此需要出现一个新的地区列表。我更改国家/地区将触发该国家/地区的 onchange 事件，并且会出现一个新列表。如果发生反应性更改并更新国家/地区，则不会触发 onchange。那是个问题。长话短说，答案是在输入上没有任何 onchange 事件，但有一个 Ractive.on('change') 事件，然后解析任何感兴趣的关键路径。这将通过设置或合并来捕捉来自人类的变化和来自“超越”的变化。

var cust = {
    firstname: 'Fred',
    lastname: 'Flintstone'
}

ractive = new Ractive({
    el: '#spot',
    template: '#tmpl1',
    data: {customer: cust},
    lazy: true
})

ractive.on('change', function(kp) {
    console.log(kp)
})

setTimeout(function() {
    ractive.set('customer.firstname', 'Wilma')
}, 2000)

setTimeout(function() {
    ractive.merge('customer', {firstname: 'Barney', lastname: 'Rubble'})
}, 4000)

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<body>
    <div id='spot'></div>
    <script id='tmpl1' type='text/tmpl'>
        <input value={{customer.firstname}}>
        <input value={{customer.lastname}}>
    </script>
</body>

【讨论】：