en utilisant des modèles de soulignement avec backbone.js

Question

J'essaie de créer une page en utilisant backbone.js et underscore.js. Je veux que la page ait un bouton, qui une fois pressé, ajoute le contenu d'un formulaire à une étiquette vide sur la page en utilisant un modèle que j'ai défini.

Voici mon tag vide où je veux les choses de modèle pour aller après pression sur la touche:

<div id="playView"></div> 
<input type="button" id="addQuestion" value="Add Question" /> 

Voici mon modèle dans lequel les données de formulaire doivent aller:

<script id="viewTemplate" type="text/template"> 
    <div id="stemView">{{ Stem }}</div> 
    <label for="answer1"> a)</label><div>{{ answer1View }}</div> 
    <label for="answer2"> b)</label><div>{{ answer2View }}</div> 
    <label for="answer3"> c)</label><div>{{ answer3View }}</div> 
    <label for="answer4"> d)</label><div>{{ answer4View }}</div> 
</script> 

Et est ici la forme que l'utilisateur va remplir:

<form> 
    <textarea id="stem"><textarea> 
    <textarea id="answer1"></textarea> 
    <textarea id="answer2"></textarea> 
    <textarea id="answer3"></textarea> 
    <textarea id="answer4"></textarea> 
</form> 

Et voici le code backbone.js approprié. Ma question est, qu'est-ce que je fais dans l'événement? Comment puis-je obtenir les données à partir du formulaire, puis dans le viewTemplate, puis dans la balise div vide (playView)?

wizard.PlayView = Backbone.View.extend({ 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    }, 
    el: '#playView', 

    events: { 
     'click button#addQuestion': 'addQuestion' 
    } 
    addQuestion: function() { 
     $(this.el).append(); 
    } 
}); 

Answer 1

la façon dont vous avez Si je vous comprends bien, cette configuration maintenant, vous ne serez pas en mesure de déclencher

events: { 
     'click button#addQuestion': 'addQuestion' 
    } 

car la balise d'entrée doit être dans le modèle de colonne vertébrale. Donc, pour résoudre ce problème, le modèle d'os noir va rendre le bouton sur la page, puis écouter le clic sur le bouton. Lorsque le bouton est cliqué, vous chargez le modèle de question (qui est intégré dans la page html et insérez que dans le modèle fédérateur actuel.

<script id="viewTemplate" type="text/template"> 
    <div id="stemView">{{ Stem }}</div> 
    <label for="answer1"> a)</label><div>{{ answer1View }}</div> 
    <label for="answer2"> b)</label><div>{{ answer2View }}</div> 
    <label for="answer3"> c)</label><div>{{ answer3View }}</div> 
    <label for="answer4"> d)</label><div>{{ answer4View }}</div> 
</script> 

<script id="mainTemplate" type="text/template"> 
    <input type="button" id="addQuestion" value="Add Question" /> 
</script> 


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

el: '#playView', 

template : _.template($('#mainTemplate').html()) 

events: { 
    'click button#addQuestion': 'addQuestion' 
} 

addQuestion: function() { 
    var t = _.template($('#stemTemplate').html(); 
    $(this.el).append(t(this.model.toJSON())); 
} 

render: function() { 
      $(this.el).append(this.template(this.model.toJSON())); 
     } 

}); 

Answer 2

Vous devez d'abord générer le modèle contenant les données.

Puis dans la vue, vous auriez compiler le modèle premier

Utilisez _.template pour compiler le modèle

wizard.PlayView = Backbone.View.extend({ 
     template : _.template($('#viewTemplate').html()) 
     initialize: function() { 
     // Use listenTo to bind events instead of directly 
     // listening on the model 
      this.listenTo(this.model, 'change', this.render); 
     }, 
     events: { 
      'click .addQuestion': 'addQuestion' 
     }, 
     addQuestion: function(e) { 
      var $target = $(e.target); 
      // Your logic here 
     }, 
     render: function() { 
      $(this.el).append(this.template(this.model.toJSON())); 
     } 

Puis dans le rendu de la vue que vous passeriez dans le modèle avec le modèle compilé , qui serait peuplé avec les données à l'intérieur du modèle.