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.

InformationsquelleAutor Nilesh C | 2012-02-19

backbone.js underscore.js

3

Gibt es ein paar Dinge, die falsch mit dem, was Sie tun:

Wenn du dies tust:
```
//Run code
var collection = new App.Collection;
var view = new App.View({model: collection.at(0)});
$('#container').html(view.render().el);
collection.fetch();
```
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:
```
var p = collection.fetch();
p.done(function () {
  var view = new App.View({model: collection.at(0)});
  ...
}
```
Ist es auch besser, geben Sie dem container-element in der Ansicht. Sie können dies tun, indem Sie einfach
```
var view = new App.View({model: collection.at(0), el: '#container'});
```
- $.getan, scheint nicht zu funktionieren für mich mit Rückgrat. Ich bin mit jQuery 1.7 schon. Tut .fetch() Gegenzug ein ajax-Objekt? Ich bekomme undefined als der Wert von p bei mir läuft dein code.
- fetch() gibt das Ergebnis einer sync() 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.
- Danke für den Tipp, ggozad. Ich hatte eine benutzerdefinierte sync() die nicht Rendite Versprechen. Feste und Ihre Lösung funktioniert perfekt.
InformationsquelleAutor ggozad
4

Ist eine option, um zu definieren, leeren Standard-Werte für Ihr Modell.
```
App.Model = Backbone.Model.extend({
  defaults: {
    name: '',
    email: '',
    phone: ''
  }
});
```
- Ja, mit Standards ist das, was mir in den Sinn kam früher. Es gibt jedoch ein kleines bisschen Komplexität in meinem Fall. Ich habe eine dynamische Menge von Attributen, die für mein Modell. Mein server ist nicht REST-basierte und nicht senden Sie die gleiche Menge von Attributen für unterschiedliche Daten. Also ich ausgeschlossen von dieser Methode.
InformationsquelleAutor abraham
2

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.
```
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>
```
- Aber fehlt verschachtelte (tief) Attribute werden immer noch Fehler auslösen.
- <div id="template"> {{data.name}} {{data.phone}} {{data.demographics.foo.bar}} </div> wird immer noch werfen einen undefinierten Fehler
- Das gibt ein Fehler in javascript und auch Ihre nicht anders als in der Vorlage-rendering. Im obigen Beispiel {{data.phone}} keine Fehler geben, weil data definiert ist. Für {{data.demographics.foo.bar}} data.demographics.foo definiert und einen check für, die ist ein muss vor der Verwendung data.demographics.foo.bar
- Das war mein Punkt einfach, dass das zuweisen des Objektes zu einem anderen Objekt nur mit einem einzigen Fall. musst du testen jede Eigenschaft, um zu sehen, wenn es vorhanden ist
InformationsquelleAutor Venkat Kotra
0

Ich würde auch vorschlagen, mit Distalen Vorlagen.

InformationsquelleAutor Kernel James

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.