Umstellung undefinierte Attribute in unterstrichen.js -Vorlagen

Question

Ich mache ein einziges Rückgrat -Modell in einer Ansicht. Ich verwende die Standard -Unterstrichvorlage, um das Modell zu rendern. Wie gehe ich mit den "undefinierten" Attributfehlern um, wenn ich die Ansicht mache (obwohl das Modell nicht geladen wurde)? Um zu verdeutlichen, finden Sie hier ein Beispiel.

// Using Mustache style markers
_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
};

App.Model = Backbone.Model.extend({});

App.Collection = Backbone.Collection.extend({
    model: App.Model
});

App.View = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        this.template = _.template($('#model_template').html());
        this.model.bind('reset', this.render);
    },
    render: function() {
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);
        return this;
    }
});

// HTML
<div id="container"></div>
<script id="model_template" type="text/template">
    <strong>Name:</strong> {{ name }} <br/>
    <strong>Email:</strong> {{ email }} <br/>
    <strong>Phone:</strong> {{ phone }}
</script>

// Run code
var collection = new App.Collection;
var view = new App.View(model: collection.at(0));
$('#container').html(view.render().el);
collection.fetch();

Wenn dieser Code ausgeführt wird, wird die Ansicht zweimal, zuerst mit einem leeren Modell und zweitens, wenn die AJAX -Abfrage abgeschlossen ist (und "Reset" ausgelöst wird). Aber das Problem, mit dem ich ausgesetzt bin, ist, dass JS an erster Instanz stoppt, wenn das Modell leer ist. Es gibt einen Fehler, der besagt, dass das Modellattribut nicht definiert ist.

Was mache ich hier falsch? Kann ich den "undefinierten" Fehler unterdrücken, wenn die Ansicht in erster Linie gerendert wird?

Answer 1

Es gibt ein paar Dinge, die mit dem schief gehen, was Sie tun:

Wenn Sie das tun:

// Run code
var collection = new App.Collection;
var view = new App.View({model: collection.at(0)});
$('#container').html(view.render().el);
collection.fetch();

Zunächst erstellen Sie die Sammlung. Es ist noch keine Modelle zugeordnet. Wenn Sie also als nächstes die Ansicht mit dem ersten Modell der Sammlung initialisieren, das noch nicht existiert. Die richtige Art und Weise, dies zu tun, besteht darin, die Sammlung zu holen (), und wenn dies abgeschlossen ist, erstellen Sie die Ansicht. Etwas wie:

var p = collection.fetch();
p.done(function () {
  var view = new App.View({model: collection.at(0)});
  ...
}

Es ist auch besser, das Containerelement der Ansicht zu verleihen. Sie können das einfach tun

var view = new App.View({model: collection.at(0), el: '#container'});

Answer 2

Eine Option besteht darin, Standardwerte für Ihr Modell zu definieren.

App.Model = Backbone.Model.extend({
  defaults: {
    name: '',
    email: '',
    phone: ''
  }
});

Answer 3

Um den undefinierten variablen Fehler beim Rendern der Unterstrichvorlage zu vermeiden, übergeben Sie die Vorlagendaten in einem Wrapper -Objekt. Fehlender Zugriff auf den Eigenschaft macht keinen Fehler.

var template = _.template($('#template').html());
var data = {name:'Jeo'}; // phone not available
template({data:data});
// Output: Jeo 

<div id="template">
    {{data.name}} {{data.phone}}
</div>

Answer 4

Ich würde auch vorschlagen, verwenden Distale Vorlagen.