Meteor – C’è un modo per ottenere il binding dei dati bid in due modi per funzionare?

Imansible associare l’associazione dati bidirezionale a un

. Ecco la demo

html:

  
{{content}}

js:

 if (Meteor.isClient) { Session.setDefault('content', 'Try to edit me') Template.body.helpers({ content: function () { return Session.get('content') } }) Template.body.events({ 'keydown div': function (e) { setTimeout(function(){ Session.set('content', $(e.target).text()) }) } }) } 

C’è anche un problema aperto per questo su github.

puoi usare l’evento ‘input’

fork meteorpad del tuo esempio: http://meteorpad.com/pad/x3JQpGiqpE2FrTfLK/content%20editable

domanda correlata: eventi di modifica contenteditable

  Template.body.events({ 'input div': function (e) { Session.set('content', $(e.target).text()); } }); 

Tuttavia, c’è un problema con gli elementi modificabili di binding in generale, noterete che ogni evento di input risulta nell’impostazione del testo due volte.

Puoi ovviare a ciò eliminando il testo modificabile dopo ogni modifica:

 Template.body.events({ 'input div': function (e) { Session.set('content', $(e.target).text()); $(e.target).text(''); } }); 

Ma ora hai un altro problema, il cursore salta all’inizio.

Per affrontare questi dilemmi, uso questa logica:

“L’utente ha apportato la modifica più recente al modello dati?”

  • aggiornare il modello di dati con il testo più recente dell’utente. Non aggiornare l’editor di testo. essere ottimista.

  • se l’aggiornamento fallisce, imposta l’editor di testo sul modello dati (ripristina la loro modifica, mostra qualche errore)

“Qualcosa oltre l’utente ha cambiato il modello dei dati per il testo?”

  • aggiorna l’editor di testo per mostrare il testo più recente

O semplicemente usa https://github.com/gwendall/meteor-bindings . Fa uso di variabili reattive per bind qualsiasi elemento DOM agli input.

Disclaimer: l’ho costruito