templates - How to handle undefined values in the JSON data with Backbone Marionette -
i have following setup:
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); } }); } }); }); the structure of collection returned is:
[ { "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 @ kforce professional staffing", "id": "jgei3x15sx", "industry": "staffing , 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*" } },... ]
my template render data is:
<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> however, users not have 'pictureurl' , error of 'uncaught referenceerror: pictureurl not defined'. not sure doing wrong undefined value not handled. sure easy fix , appreciated.
short answer - override serializedata in marionette.itemview
there 2 options. either check type undefined in templates or make sure data has model attributes defined.
the first cumbersome , adds lot of clutter templates. second case 1 approach mentioned in other answer use model defaults. puts problem.
model defaults meant provide values attributes can have meaningful value. example attribute "isvalid" can have default value of true. there's no meaningful default "lastname". setting model defaults such values have side effect of saving defaults server, requirement put defaults views/templates.
to avoid this, can override serializedata in marionette.itemview add defaults rendering.
backbone.marionette.itemview.extend({ serializedata: function(){ return _.extend({}, this.model.renderdefaults ? _.result(this.model, 'renderdefaults') : {}, this.model.tojson() ); } }); in models can put defaults rendering this
backbone.model.extend({ renderdefaults : { pictureurl : 'data:image/gif;base64,r0lgodlhaqabaad/acwaaaaaaqabaaacads%3d' } }); or
backbone.model.extend({ renderdefaults : function(){ return { pictureurl : 'data:image/gif;base64,r0lgodlhaqabaad/acwaaaaaaqabaaacads%3d' } } });
Comments
Post a Comment