3

私は次の設定をしています：

    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);
                }
            });
        }
    });
});

返される Collection の構造は次のとおりです。

[ { "apiStandardProfileRequest": { "headers": { "_total": 1, "values": [ { "name": "x-li-auth-token", "value": "name:ksBx" } ] } , "url": " http://api.linkedin.com/v1/people/jGEI3X15sx " }, "firstName": "Eileen", "headline": "Kforce Professional Staffing のデリバリー担当マネージング ディレクター", "id" : "jGEI3X15sx", "業界": "人員配置と採用", "lastName": "Adams (LION)", "location": { "country": { "code": "us" },"name": "Greater Boston Area" }, "pictureUrl": " http://mclnkd.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」を持っておらず、「Uncaught ReferenceError: pictureUrl is not defined」というエラーが表示されます。未定義の値が処理されないという私が間違っていることはわかりません。これは簡単な修正であり、助けがあれば幸いです。

4

2 に答える 2

3

短い答え - Marionette.ItemView で serializeData をオーバーライドします

2 つのオプションがあります。テンプレートで未定義の型を確認するか、データに常にモデル属性が定義されていることを確認してください。

1 つ目は扱いにくく、テンプレートが煩雑になります。2番目のケースでは、他の回答で言及されている1つのアプローチは、モデルのデフォルトを使用することです。しかし、それは別の問題を引き起こします。

モデルのデフォルトは、常に意味のある値を持つことができる属性の値を提供することを目的としています。たとえば、属性「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'
    }
  }
});
于 2013-10-08T13:46:40.470 に答える