Umgang mit unbestimmten Parametern in underscore.js Vorlagen
Ich bin das Rendern eines einzigen Backbone-Modell in einer Ansicht. Ich bin mit dem Standard-Unterstrich-Vorlage zum Rendern des Modells. Wie gehe ich mit "undefined" - Attribut Fehler, wenn ich das Rendern der Ansicht (obwohl das Modell noch nicht geladen)? Um zu klären, 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 gerendert wird zweimal, zuerst mit einem leeren Modell und zweitens, wenn der AJAX Abfrage abgeschlossen ist (und 'reset' ausgelöst wird). Aber das Problem, das ich bin vor ist JS Stoppt bei der ersten Instanz, wenn das Modell leer ist. Es gibt einen Fehler, nämlich das Modell-Attribut nicht definiert ist.
Was mache ich hier falsch? Kann ich unterdrücken, die 'undefined' Fehler, wenn die view gerendert wird, die in der ersten Instanz?
- Wenn Sie brauchen, um das Rendern einer Ansicht mit einem leeren Modell, dass ich wohl eher auf die Standardwerte abraham erwähnt hat. Ansonsten werden Ihre Vorlagen unterbringen konnte-Bedingungen. Siehe stackoverflow.com/questions/7230470/...
- Danke, SunnyRed. Das sieht wie eine gute Idee, wenn die Anzahl der Attribute, die kleiner sind. Ich habe 20+ Attribute in meiner Vorlage! Wäre eine schwierige Sache zu verwalten.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es ein paar Dinge, die falsch mit dem, was Sie tun:
Wenn du dies tust:
Zuerst erstellen Sie die Sammlung. Es hat bisher noch keine Modelle zugeordnet. Also, wenn du das nächste initialisieren Sie die Ansicht mit der Auflistung erste Modell, das noch nicht existiert.
Der richtige Weg zu tun, ist von fetch() die Sammlung, und wenn das abgeschlossen hat, die die Sicht erstellt wird. So etwas wie:
Ist es auch besser, geben Sie dem container-element in der Ansicht. Sie können dies tun, indem Sie einfach
.fetch()
Gegenzug ein ajax-Objekt? Ich bekommeundefined
als der Wert von p bei mir läuft dein code.fetch()
gibt das Ergebnis einersync()
das ist ein ajax-Versprechen. Wenn Sie angepasst haben, abrufen oder synchronisieren dürfte es nicht funktionieren. In diesem Fall einfach nicht verwenden a Versprechen, aber statt übergeben Sie eine Erfolgs-callback.sync()
die nicht Rendite Versprechen. Feste und Ihre Lösung funktioniert perfekt.Ist eine option, um zu definieren, leeren Standard-Werte für Ihr Modell.
Vermeiden undefined variable Fehler beim Rendern Unterstrich Vorlage, pass die Vorlage von Daten in einem wrapper-Objekt. Fehlende Eigenschaft Zugriff wird nicht werfen einen Fehler.
<div id="template"> {{data.name}} {{data.phone}} {{data.demographics.foo.bar}} </div>
wird immer noch werfen einen undefinierten Fehler{{data.phone}}
keine Fehler geben, weildata
definiert ist. Für{{data.demographics.foo.bar}}
data.demographics.foo
definiert und einen check für, die ist ein muss vor der Verwendungdata.demographics.foo.bar
Ich würde auch vorschlagen, mit Distalen Vorlagen.