Underscore.js Modèle Question - Ne peut pas appeler la méthode 'remplacer', null

J'ai été à la recherche sur et trouvé beaucoup de réponses, mais aucune ne semble fonctionner.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Shopping Cart
</title>
<link rel="stylesheet" href="lib/style.css" type="text/css">
</head>
<body>
<script id="rtemp" type="text/x-underscore-template"">
<span><%= title %></span>
</script>
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<script src="lib/script.js" type="text/javascript"></script>
</body>
<script>
var Photo = Backbone.Model.extend({
initialize: function(){
console.log('this model has been initialized');
this.bind("change:title", function(){
var title = this.get("title");
console.log("My title has been changed to.. " + title);
var pv = new PhotoView();
pv.render();
});
},
setTitle: function(newTitle){
this.set({ title: newTitle });
},
setLocation: function(newLoc)
{
this.set({location:newLoc});
}
});
var PhotoView = Backbone.View.extend
({
el: $('body'),
render: function(event)
{
var name = myPhoto.get('title');
console.info(name);
var template = _.template($('#rtemp').html(), {title:name});
console.info(this.model);
$(this.el).html(template);
return this;
}
});
</script>
</html>

Premier;

Créer une nouvelle instance de la méthode

 var newPhoto = new Photo();
newPhoto.setTitle('Fishing');

Ce beau travail, il va charger dans le corps, par le modèle. Toutefois, si je puis le faire à nouveau,

newPhoto.setTitle('Sailing');

J'obtiens l'erreur "Impossible d'appeler la méthode 'remplacer', null"

Pas de ligne d'erreur, mais je crois que c'est à

var template = _.template($('#rtemp').html(), {title:name});

OriginalL'auteur mcclennon19 | 2012-06-12

  1. 23

    Vous avez quelques choses de mal ici.

    1. Votre modèle a un double " dans le type attribut, il convient de:

      <script id="rtemp" type="text/x-underscore-template">

    2. Votre point de vue est render est de référencement myPhoto quand il doit être this.model:

      var name = this.model.get('title');

    3. Et votre principal problème est que votre point de vue utilise <body> comme son this.el et votre modèle est à l'intérieur de <body>.

    Vous remplacer complètement le contenu de <body> lorsque vous effectuez le rendu de votre point de vue:

    $(this.el).html(template);

    ainsi, après la première render appel, il n'y a plus #rtemp. Puis, sur la prochaine render appel, vous essayez ceci:

    var template = _.template($('#rtemp').html(), ...);

    mais depuis #rtemp n'est pas dans les DOM plus, tout tombe à l'eau.

    Si vous prenez le modèle immédiatement:

    var PhotoView = Backbone.View.extend({
el: $('body'),
template: _.template($('#rtemp').html()),
//...
});

    et ensuite utiliser this.template() dans render:

    render: function(event) {
//...
var template = this.template({
title: name
});
//...
}

    vous aurez plus de chance. Vous aurez, bien sûr, assurez-vous de définir votre point de vue à l'intérieur d'un document-prêt gestionnaire avec cette approche ou #rtemp peuvent ne pas être disponibles lorsque vous définissez votre point de vue.

    Démo: http://jsfiddle.net/ambiguous/dwGsM/

    Cela dit, la structure de votre application est plutôt bizarre. Vous avez un modèle qui est à l'écoute de lui-même et ensuite, le modèle crée et rend une vue lorsque quelque chose change. Un modèle à l'écoute de lui-même est bien en soi, mais en général, vous avez vues à l'écoute de modèles et de la vue serait ré-rendu de lui-même (ou d'une partie d'elle-même) que le modèle change.

    Votre modèle doit ressembler à ceci:

    var Photo = Backbone.Model.extend({
setTitle: function(newTitle) {
this.set({ title: newTitle });
},
setLocation: function(newLoc) {
this.set({ location: newLoc });
}
});

    Et puis votre point de vue comme ceci:

    var PhotoView = Backbone.View.extend({
el: $('body'),
template: _.template($('#rtemp').html()),
initialize: function() {
_.bindAll(this, 'render');
this.model.on('change:title', this.render);
},
render: function(event) {
this.$el.html(
this.template(this.model.toJSON())
);
return this;
}
});

    La _.bindAll dans initialiser assure que this.render sera appelée avec le droit this; puis initialize se lie à l'événement afin qu'il puisse répondre à des changements dans le modèle. Le point de vue sait ce qu'il se soucie de sorte qu'il est responsable de la gestion des modifications dans le modèle. Et dans le render, il vous suffit d'appeler toJSON pour obtenir les données pour le modèle. Aussi, les nouvelles versions de la Dorsale inclure une version mise en cache de $(this.el) dans la vue comme .$el de sorte que vous n'avez pas à $(this.el) plus soi-même.

    Alors vous feriez manivelle les choses comme ceci:

    var newPhoto = new Photo();
var viewPhoto = new PhotoView({ model: newPhoto });
newPhoto.setTitle('Fishing');
newPhoto.setTitle('Sailing');

    - Vous dire à la vue de ce modèle à utiliser en spécifiant le model option lors de la création de la vue.

    Vous pouvez également déplacer le modèle <script> de <body>.

    Nouvelle et Améliorée de Démonstration: http://jsfiddle.net/ambiguous/Kytw7/

    Merci mu, c'est de court, qui a beaucoup aidé. J'ai été le dénigrement de ma tête avec cette épine dorsale des choses, mais votre explication a effacé beaucoup de questions 😀
    Excellentes explications! 1. Je me demandais où appelez-vous render() si après var viewPhoto = new PhotoView({ model: newPhoto }); vous n'avez pas de modifications du modèle. 2. Comment voulez-vous réduire le nombre de "rendu" le moment?
    Difficile à dire sans plus de détails, mais vous auriez probablement juste de l'appeler manuellement.
    "Vous remplacer complètement le contenu de <body> lorsque vous effectuez le rendu de votre point de vue." Merci!!!!

    OriginalL'auteur mu is too short