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

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

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

//使用胡须样式标记
_.templateSettings={
内插：/\{（.+？）\}\}/g
};
App.Model=Backbone.Model.extend（{}）；
App.Collection=Backbone.Collection.extend({
型号：App.model
});
App.View=Backbone.View.extend({
初始化：函数（）{
_.bindAll（这是“呈现”）；
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）；
归还这个；
}
});
//HTML
名称：{{Name}}

电子邮件：{{Email}}

电话：{{Phone}
//运行代码
var collection=新的App.collection；
var view=new App.view（模型：collection.at（0））；
$（'#container'）.html（view.render（）.el）；
collection.fetch（）；

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

---

我做错了什么？在第一个实例中渲染视图时，是否可以抑制“未定义”错误？

我还建议使用。

一个选项是为模型定义默认空值

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

---

你的工作有一些地方出了问题：

当您这样做时：

// Run code
var collection = new App.Collection;
var view = new App.View({model: collection.at(0)});
$('#container').html(view.render().el);
collection.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'});

---

要避免呈现下划线模板时出现未定义变量错误，请在包装器对象内传递模板数据。缺少属性访问不会引发错误

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>

var-template=..template（$（'.#template'）.html（））；
变量数据={name:'Jeo'}；//电话不可用
模板（{data:data}）；
//产出：Jeo
{{data.name}{{data.phone}

如果需要使用空模型渲染视图，我可能倾向于使用abraham提到的默认值。否则，您的模板可以容纳条件。谢谢你，太阳红。如果属性的数量较少，这看起来是个好主意。我的模板中有20多个属性！这将是一件很难管理的事情。是的，使用默认值是我之前想到的。然而，我的情况有点复杂。我的模型有一组动态属性。我的服务器不是基于REST的，不会为不同的数据发送相同的属性集。所以我排除了这种方法。$.done对我来说似乎不太适合。我已经在使用jQuery1.7了。

.fetch（）

是否返回ajax对象？当我运行代码时，

undefined

作为p的值。

fetch（）

返回一个

sync（）

的结果，这是一个ajax承诺。如果您有自定义的获取或同步，它可能无法工作。在这种情况下，不要使用承诺，而是传递一个成功回调。谢谢你的提示，ggozad。我有一个自定义的

sync（）

，它没有返回承诺。修复了它，您的解决方案工作得很好。但是缺少嵌套（deep）属性仍然会抛出错误。

{{data.name}{{{data.phone}{{data.demographics.foo.bar}

仍然会抛出一个未定义的错误，该错误在javascript中也会给出错误，在模板呈现中也没有区别。在上面的示例中，

{{data.phone}}

没有给出错误，因为定义了

data

。对于

{data.demographics.foo.bar}

data.demographics.foo

必须定义，并且在使用

data.demographics.foo.bar

之前必须对其进行检查，这是我的观点-将对象简单地分配给另一个对象只处理一种情况。你必须测试每个属性，看看它是否存在