处理 underscore.js 模板中未定义的属性

Question

我正在视图中渲染单个 Backbone 模型。我使用默认的下划线模板来渲染模型。当我渲染视图时（尽管模型尚未加载），如何处理“未定义”属性错误？为了澄清这一点，这里有一个例子。

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

运行此代码时，视图将呈现两次，第一次使用空模型，第二次在 AJAX 查询完成时呈现（并且触发“重置”）。但我面临的问题是，当模型为空时，JS 在第一个实例中停止。它给出一个错误，指出模型属性未定义。

我在这里做错了什么？当视图在第一个实例中呈现时，我可以抑制“未定义”错误吗？

Answer 1

一种选择是为模型定义默认空值。

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

Answer 2

您的操作可能会出现一些问题：

当您这样做时：

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

首先，您创建集合。它还没有任何与之关联的模型。因此，下一步时，您将使用集合中尚不存在的第一个模型来初始化视图。
正确的方法是 fetch() 集合，完成后创建视图。类似于：

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

最好将容器元素提供给视图。你可以简单地做到这一点

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

Answer 3

为了避免渲染下划线模板时出现未定义变量错误，请将模板数据传递到包装对象内。缺少属性访问不会引发错误。

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

我还建议使用远端模板。