如何處理不定值與骨幹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/

如果你正在寫的模型重新就業，爲存儲服務器可能會出現問題這種方法。