Question

我一直在研究许多双向数据绑定库，到目前为止还没有找到一个当从模型上的更改设置输入值时触发更改事件的库。用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>

请注意，twoway绑定已被禁用，否则当用户与输入交互时，您将获得额外的事件触发 - 因此您需要侦听{{1} } / input事件并自己处理这些交互。

Answer 2

答案（就我的目的而言）其实很简单。首先是一个小背景 - 我可能应该在原始问题中概述。我们假设您正在查看/修改客户资料。与此同时，其他人也在这样做。他们更新手机号码并重新保存个人资料。除非您重新加载配置文件，否则没有任何特殊操作，您将无法看到新手机＃。我的目标是使我们的数据/表格“反应”。其中一个困难是更新表格。本身很容易，但如何处理输入上的任何onchange事件。让我们说一个国家已经改变，所以需要出现一个新的地区清单。我改变国家将触发国家的onchange事件，并出现一个新的列表。如果发生了反应性变化并更新了国家，那么变化就不会发生。这是一个问题。简而言之，答案是不要在输入上有任何onchange事件，而是有一个Ractive.on（＆＃39; change＆＃39;）事件，然后解析关键路径以获取任何感兴趣的内容。这将通过设置或合并来捕捉来自人类的变化以及来自“超越”的变化。

＆＃13;

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)

＆＃13;

<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>

＆＃13;

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

2 个答案: