如何处理不定值与骨干JSON数据木偶

Question

我有以下设置：

App.module('TestUsers.Views', function(TestUsersViews, App, Backbone, Marionette, $, _) { 
    TestUsersViews.UsersItemView = Marionette.ItemView.extend({ 
     template: testUsersItemViewTmpl 
     , tagName: 'tr' 
     , templateHelpers: { 
      handleUndefined: function(val) { 
       return (_.isUndefined(val) ? '' : val); 
      } 
     } 
    }); 

    TestUsersViews.UsersTable = Marionette.CompositeView.extend({ 
     template: testUsersTmpl 
     , tagName: 'table' 
     , className: 'h-center' 
     , itemView: TestUsersViews.UsersItemView 
     , itemViewContainer: 'tbody' 
     , initialize: function() { 
      this.listenTo(this.collection, 'reset', function() { 
       this.appendHtml = function(collectionView, itemView, index) { 
        collectionView.$el.append(itemView.el); 
       } 
      }); 
     } 
    }); 
}); 

集合的结构返回的是：

[ { "apiStandardProfileRequest": { "headers": { "_total": 1, "values": [ { "name": "x-li-auth-token", "value": "name:ksBx" } ] }, "url": " http://api.linkedin.com/v1/people/jGEI3X15sx " }, "firstName": "Eileen", "headline": "Managing Director of Delivery at Kforce Professional Staffing", "id": "jGEI3X15sx", "industry": "Staffing and Recruiting", "lastName": "Adams (LION)", "location": { "country": { "code": "us" }, "name": "Greater Boston Area" }, "pictureUrl": " http://m.c.lnkd.licdn.com/mpr/mprx/0_y_g-snorc6G3qFIa- >bjSsz4yRb6un3EaOkWSszeCX3-yW5gmr5SOqvpuzEQPz6wGg8x2vtspSH8c", "siteStandardProfileRequest": { "url": " http://www.linkedin.com/profile/view ?>id=3633999&authType=name&authToken=ksBx&trk=api*a249733*s257591*" } },... ]

我的模板来呈现数据：

<td id="<%= id %>"><img src="<%= pictureUrl %>" width="16"  height="16"/><%= firstName %> <%= lastName %></td> 
<td><%= headline %></td> 
<td></td> 
    <td><%= location.country.code %></td> 
    <td><%= location.name %></td> 
    <td><a href="<%= siteStandardProfileRequest.url %>">Full Profile</a></td> 

然而，一些用户没有“pictureUrl”，我得到的“未捕获ReferenceErro错误r：pictureUrl未定义'。我不知道我在做什么错误，未定义的值没有处理。我相信这是一个简单的解决方法，任何帮助表示赞赏。

Answer 1

简答 - 覆盖serializeData在Marionette.ItemView

有两个选项。检查模板中未定义的类型，或确保数据始终具有已定义的模型属性。

首先是繁琐的，并增加了很多混乱的模板。对于第二种情况，其他答案中提到的一种方法是使用模型默认值。但是这带来了另一个问题。

模型默认值旨在为可以始终具有有意义值的属性提供值。示例属性“isValid”可以具有默认值true。但“lastName”没有有意义的默认值。设置这些值的模型默认值具有将缺省值保存到服务器的副作用，因为您唯一的要求是将视图/模板设置为默认值。

为了避免这种情况，您可以在Marionette.ItemView中重写serializeData以仅为渲染添加默认值。

Backbone.Marionette.ItemView.extend({ 
    serializeData: function(){ 
    return _.extend({}, 
     this.model.renderDefaults ? _.result(this.model, 'renderDefaults') : {}, 
     this.model.toJSON() 
    ); 
    } 
}); 

在模型中，你可以把你的默认渲染这样

Backbone.Model.extend({ 
    renderDefaults : { 
    pictureUrl : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D' 
    } 
}); 

或

Backbone.Model.extend({ 
    renderDefaults : function(){ 
    return { 
     pictureUrl : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D' 
    } 
    } 
}); 

Answer 2

有很多方法可以解决这类问题，下面我将概述一些常规策略。

在模板

如果你想处理这个模板中，那么你就需要使用typeof检查是否存在pictureUrl，任何东西都不会给你的ReferenceError的reasons I've described elsewhere。

这种方法看起来像这样在你的模板：

<% if(typeof pictureUrl !== 'undefined') { %> 
    <img src="<%= pictureUrl %>" width="16" height="16"> 
<% } %> 

你可能想说if(typeof pictureUrl !== 'undefined' && pictureUrl)如果你希望空pictureUrl值以及失踪者。

演示：http://jsfiddle.net/ambiguous/7bXzf/

你也可以添加一个else到有条件的，如果你想使用标准的占位符的头像，这可能会使你的布局有点漂亮和更一致的。

在模型

根据接收到的数据的精确格式，你也许可以使用你的模型defaults提供一个占位符。像这样的事情在你的模型应该做的伎俩：

defaults: { 
    //... 
    pictureUrl: 'url-for-placeholder-avatar-goes-here', 
} 

你也可以使用pictureUrl: ''如果你不想要一个占位符，但随后你会想在你的模板中的<% if(pictureUrl) { %>检查，以避免无效的HTML。

演示：http://jsfiddle.net/ambiguous/BZAjJ/

如果你正在写的模型重新就业，为存储服务器可能会出现问题这种方法。