Underscore.js Template Problem - kann Nicht rufen Sie die Methode 'replace' null

Bin ich auf der Suche über und fand eine Menge Antworten, aber keine scheint zu funktionieren.

<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>

Ersten;

Erstellen Sie eine neue Instanz der Methode

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

Diese funktionieren, geladen werden, die in den Körper über die Vorlage. Aber wenn ich dann es wieder tun,

newPhoto.setTitle('Sailing');

Bekomme ich den Fehler "Cannot call method "ersetzen " null"

Keine Zeile Fehler, aber ich glaube, es ist an

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

InformationsquelleAutor mcclennon19 | 2012-06-12

  1. 23

    Haben Sie ein paar Dinge hier falsch.

    1. Ihre Vorlage hat ein Doppelzimmer " im type Attribut, es sollte sein:

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

    2. Ihrer Ansicht render auf myPhoto sein, wenn es this.model:

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

    3. Und Ihr Hauptproblem ist, dass deine Ansicht verwendet <body> als seine this.el und Ihre Vorlage ist innerhalb <body>.

    Sie vollständig ersetzen Sie den Inhalt <body> beim Rendern Sie Ihre Ansicht:

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

    also nach dem ersten render nennen, gibt es nicht mehr #rtemp. Dann, auf der nächsten render nennen, Sie versuchen, diese:

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

    aber da #rtemp ist nicht in der DOM mehr, alles fällt auseinander.

    Wenn Sie ergreifen Sie die Vorlage sofort:

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

    und verwenden Sie dann this.template() im render:

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

    haben Sie mehr Glück. Sie, natürlich, müssen Sie sicherstellen, dass Sie definieren, Ihre anzeigen innerhalb eines document-ready-handler mit diesem Ansatz oder #rtemp möglicherweise nicht verfügbar, wenn Sie definieren Ihre Ansicht.

    Demo: http://jsfiddle.net/ambiguous/dwGsM/

    Sagte, die Struktur der Anwendung ist eher Bizarr. Sie haben ein Modell, das hört sich und dann wird das Modell erstellt und rendert eine view wenn sich etwas ändert. Ein Modell, das Zuhören an sich ist in Ordnung an sich, sondern in der Regel haben Sie Aussicht auf das Zuhören Modelle und die Sicht wird erneut gerendert, selbst (oder nur Teile von sich selbst) als das Modell ändert.

    Ihrem Modell sollte Aussehen wie dieses:

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

    Werden und dann die Ansicht wie diese:

    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;
    }
});

    Den _.bindAll in initialize sorgt dafür, dass this.render aufgerufen wird, mit der rechten this; dann initialize bindet, um das Ereignis so, dass es auf änderungen reagieren können, die in das Modell. Die view weiß, was ihn interessiert, daher ist er verantwortlich für den Umgang mit änderungen im Modell. Und in der render Sie in der Regel rufen Sie einfach toJSON, um die Daten für die Vorlage. Auch neuere Versionen von Backbone gehören eine zwischengespeicherte version $(this.el) in der Ansicht als .$el, so dass Sie nicht haben, um $(this.el) mehr selbst.

    Dann würden Sie Kurbel Dinge wie diese:

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

    Sie sagen, die anzeigen, welches Modell zu verwenden, durch die Angabe der model option bei der Erstellung der Ansicht.

    Möchten Sie vielleicht auch zu bewegen, die Vorlage <script> aus <body>.

    Neue und Verbesserte Demo: http://jsfiddle.net/ambiguous/Kytw7/

    Danke mu ist zu kurz, das hat eine Menge geholfen. Ich habe bashing meinen Kopf mit diesem backbone-Zeug, aber deine Erklärung gelöscht hat eine Menge Probleme 😀
    Hervorragende Erläuterungen! 1. Ich Frage mich, wo nennst du render() wenn nach var viewPhoto = new PhotoView({ model: newPhoto }); Sie haben noch keine änderungen an dem Modell. 2. Wie wollen Sie reduzieren die Zahl der 'rendering' - Zeiten?
    Schwer zu sagen, ohne mehr Einzelheiten, aber Sie würden wahrscheinlich nur rufen Sie es manuell.
    "Sie ersetzen vollständig den Inhalt des <body>, wenn Sie machen Ihre Ansicht." Danke!!!

    InformationsquelleAutor mu is too short

Schreibe einen Kommentar