Manejo de atributos indefinidos en plantillas de subscore.js

Question

Estoy representando un modelo de columna vertebral única en una vista. Estoy usando la plantilla de bajo valor predeterminado para representar el modelo. ¿Cómo manejo los errores de atributo "indefinidos" cuando estoy presentando la vista (aunque el modelo no se ha cargado)? Para aclarar, aquí hay un ejemplo.

// 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();

Cuando se ejecuta este código, la vista se presenta dos veces, primero con un modelo vacío y segundo cuando la consulta AJAX se completa (y se activa 'restablecer'). Pero el problema que me enfrento es que JS se detiene en primera instancia cuando el modelo está vacío. Da un error al decir que el atributo del modelo no está definido.

¿Qué estoy haciendo mal aquí? ¿Puedo suprimir el error 'indefinido' cuando la vista se representa en primera instancia?

Answer 1

Hay algunas cosas que van mal con lo que haces:

Cuando tu lo hagas:

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

Primero, creas la colección. Todavía no tiene ningún modelo asociado con él. Entonces, cuando a continuación, inicialice la vista con el primer modelo de la colección que aún no existe. La forma correcta de hacerlo es buscar () la colección y cuando eso se haya completado, cree la vista. Algo como:

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

También es mejor dar el elemento contenedor a la vista. Puedes hacer eso simplemente

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

Answer 2

Una opción es definir los valores vacíos predeterminados para su modelo.

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

Answer 3

Para evitar el error de la variable indefinida mientras se convierte en la plantilla de subrayamiento, pase los datos de la plantilla dentro de un objeto de envoltura. Faltar el acceso a la propiedad no arrojará un error.

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

También sugeriría usar Plantillas distales.