3

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

4

2 回答 2

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事件并自己处理这些交互。

于 2014-10-21T17:45:46.757 回答
0

答案（出于我的目的）实际上非常简单。首先是一点背景 - 我可能应该在原始问题中概述。假设您正在查看/编辑客户资料。与此同时，其他人也在做同样的事情。他们更新电话号码并重新保存个人资料。如果没有做任何特别的事情，除非您重新加载配置文件，否则您不会看到新手机#。我的目标是让我们的数据/表单“具有反应性”。其中一个困难是更新表格。这本身很容易，但如何处理输入上的任何 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>

于 2014-10-23T14:11:22.137 回答