backbone.js liaison de données

Question

J'essaie de lier une entrée, un modèle et un élément dom.

<div data-carName="Isetta"> 
    <input type="textfield" name="speed"/> 
    <br /> 
    <br /> 
    Speed: <br /> 
    <div>{speed}</div> 
</div> 

var Isetta = { 
    speed:speedval 
} 

Que dois-je faire si je veux à chaque fois que l'entrée de vitesse de la carte est modifiée, pour l'élément dom vitesse pour changer avec lui, et l'objet javascript/modèle pour changer aussi? Je peux le faire facilement avec la liaison de données jQuery.

Comment est-ce que je fais avec backbone.js?

Merci.

Answer 1

Vous pouvez également envisager de frappe clavier contraignants et minuteries pour le champ de saisie de sorte que lorsqu'un utilisateur a fini de taper dans leur entrée, vous déclenchez un événement sur le modèle qui met alors à jour la vue:

Si vous ajouter id=name à ce champ, puis dans votre vue, vous pouvez ajouter quelque chose comme:

events: { 
    "keypress #speed" : "updateViewOnEnter" 
}, 

updateViewOnEnter: function(e) { 
    if (e.keyCode != 13) return; 
    e.preventDefault(); 
    this.model.trigger('speed:change'); 
}, 

Vérifiez cette fonction d'accélérateur de Remy de Sharp si vous voulez accélérateur appels de fonction en tant que utilisateur tape encore dans ce domaine d'entrée: http://remysharp.com/2010/07/21/throttling-function-calls/

events: { 
    "keypress #speed" : "updateViewOnDelayedKeypress" 
}, 

updateViewOnDelayedKeypress: function(e) { 
    throttle(function (e) { 
    this.model.trigger('speed:change'); 
    }, 250)); 
}, 

Answer 2

var Car = Backbone.Model.extend({ }); 

var CarView = Backbone.View.extend({ 
    model: Car, 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    } 
    render: function() { ... } 
} 

Le modèle Car générera des événements et CarView leur répondra. La liste des événements est beaucoup plus large - et vous pouvez ajouter les vôtres, si vous préférez, que celles de data-link. jQuery Data-Link semble être entièrement concerné par les formulaires et dispose d'un mécanisme de filtrage limité. C'est intéressant, mais il s'agit clairement d'un problème différent de celui que Backbone et d'autres bibliothèques MVC sont censées couvrir.

Answer 3

Vous pouvez également consulter cette bibliothèque: https://github.com/derickbailey/backbone.modelbinding qui ajoute un module qui gérera la liaison dynamique et conventionnelle pour vous.