3

私は多くの双方向データ バインディング ライブラリを調べてきましたが、モデルの変更によって入力の値が設定されたときに onchange イベントを発生させるものは今のところ見つかりませんでした。ractive.js でそれを行う方法はありますか?

4

2 に答える 2

1

それは可能ですが、少しハックです。ブラウザは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

答えは（私の目的では）実際には非常に簡単です。最初に少し背景を説明します。これはおそらく元の質問で説明する必要がありました。顧客プロファイルを表示/編集しているとしましょう。その間、他の誰かが同じことをしています。電話番号を更新し、プロファイルを再保存します。特別なことをしなければ、プロファイルをリロードしない限り、その新しい電話番号は表示されません。私の目標は、データ/フォームを「リアクティブ」にすることです。問題の 1 つは、フォームの更新でした。それ自体は簡単ですが、入力の 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 に答える