2014-12-03 229 views
0

我的示例應用程序中有兩個單獨的集合。我想要做的是將userId的集合聯合起來。我通常在渲染級別處理過,但是我真的想要在集合級別解析數據,並且如果您願意並簡單地將數據傳遞給我的下劃線模板,渲染將變得「啞巴」。骨幹集合 - 集合級別的Union 2集合

我遇到了幾個線程,在這個答案中,但我無法在集合級別完成此操作。

我已經在這裏設置了一個plunker來更好地描述情況。 http://plnkr.co/edit/UCAFycdmsLaD14cYgTdZ?p=preview

首先,我對用戶集合進行提取以獲取所有userId和用鍛鍊集合解決的信息。

users.json

[ 
    { 
     "user" : 53, 
     "firstname" : "Todd", 
     "lastname" : "Jones", 
     "email" : "[email protected]", 
     "avatar" : "" 
    }, 
    { 
     "user" : 53, 
     "firstname" : "Sarah", 
     "lastname" : "Thomas", 
     "email" : "[email protected]", 
     "avatar" : "" 
    } 
]  

tracker.json

[ 
    { 
     "user" : 53, 
     "distance" : 3, 
     "duration" : 180000, 
     "date" : "November 27, 2014 09:45:00", 
     "felt" : "Tired at first" 
    }, 
    { 
     "user" : 53, 
     "distance" : 3.256, 
     "duration" : 978600, 
     "date" : "November 28, 2014 10:15:00", 
     "felt" : "Great" 
    } 
]  

我已經在這個線程看到幾個例子How do I union/merge two Collections by their 'id' using UnderscoreJS

不過我相信我的問題是,我正在嘗試訪問WorkoutCollectio中的UserCollection n不正確,或者我沒有將其解析爲JSON對象(這發生在渲染函數中)。

整個代碼低於和plunker在這裏http://plnkr.co/edit/UCAFycdmsLaD14cYgTdZ?p=preview

預先感謝任何見解。

// Users Model 
var Users = Backbone.Model.extend({ 

    defaults: function() { 
     return { 
      avatar: "" // generic Avatar if none supplied by users 
     }; 
    } 

}); 

// Workouts Collection 
var UserCollection = Backbone.Collection.extend({ 

    model : Users, 
    url: '/data/users.json', 
    parse: function (responses) { 
     return responses; 
    } 

}); 
// Workouts Model 
var Workouts = Backbone.Model.extend({ 

    defaults: function() { 
     return { 
      felt: "Good" 
     }; 
    }, 

}); 

// Workouts Collection 
var WorkoutCollection = Backbone.Collection.extend({ 

    model : Workouts, 
    url: '/data/tracker.json', 
    parse: function (responses) { 

     var data = []; 
     _.each(responses, function(response){ 

      // format durations 
      var x = response.duration; 
      var d = moment.duration(x, 'milliseconds'); 
      var hours = Math.floor(d.asHours()); 
      var mins = Math.floor(d.asMinutes()) - hours * 60; 
      var seconds = Math.floor(d.asSeconds()) - mins * 60; 
      var duration = ""; 

      if (hours > 0) { 
       duration += hours + " hours "; 
      } 

      if (mins > 0) { 
       duration += mins + " minutes "; 
      } 

      if (seconds > 0) { 
       duration += seconds + " seconds "; 
      } 

      response.duration = duration; 

      // format workout dates 
      var y = response.date; 
      var z = moment(y).format('dddd, MMM Do YYYY'); 

      response.date = z; 
     }); 

     var result = []; 
     _.each(responses, function(el){ 
      console.log(el) 
      console.log(UserCollection.get("user")) 
      _.extend(el,_.where(UserCollection, {user: el.user})[0] || {}); 
      result.push(el); 
     }); 

     console.log(result); 

     return responses; 
    } 
}); 

// Main 
var ExerciseApp = Backbone.View.extend({ 

    el: "#exercise_app", 
    template: null, 

    initialize: function() { 

     this.userCollection = new UserCollection(); 
     this.listenTo(this.userCollection, "reset sync remove", this.usersLoaded); 
     this.userCollection.fetch({dataType: "json"}); 

    }, 

    usersLoaded: function() { 

     this.workoutCollection = new WorkoutCollection(); 
     this.listenTo(this.workoutCollection, "reset sync remove", this.render); 
     this.workoutCollection.fetch({dataType: "json"}); 
     this.template = _.template($('#workout-table-template').html()); 

    }, 

    render: function() { 

     var workouts = this.workoutCollection.toJSON(); 
     var users = this.userCollection.toJSON(); 
     this.$el.html(this.template({workouts: workouts, users: users})); 

    }, 

}); 

$(document).ready(function() { 
    var app = new ExerciseApp 
}); 

回答

0

我現在按照我喜歡的方式工作。

我最終做的是將用戶集合傳遞給鍛鍊集合。

然後我很容易使用下劃線_map函數合併數據。

usersLoaded: function() { 

    var users = this.userCollection.toJSON(); 
    this.workoutCollection = new WorkoutCollection(users); 
    this.listenTo(this.workoutCollection, "reset sync remove", this.render); 
    this.workoutCollection.fetch({dataType: "json"}); 
    this.template = _.template($('#workout-table-template').html()); 

}, 

parse: function (responses) { 

    var workouts = responses; 
    var users = this.users; 

    var mergedCollection = _.map(users, function (user) { 
     var workout = _.find(workouts, function (o) { 
      return o.userId == user.userId; 
     }); 
     return _.extend(user, workout); 
    }); 


    _.each(mergedCollection, function(response){ 

     // format durations 
     var x = response.duration; 
     var d = moment.duration(x, 'milliseconds'); 
     var hours = Math.floor(d.asHours()); 
     var mins = Math.floor(d.asMinutes()) - hours * 60; 
     var seconds = Math.floor(d.asSeconds()) - mins * 60; 
     var duration = ""; 

     if (hours > 0) { 
      duration += hours + " hours "; 
     } 

     if (mins > 0) { 
      duration += mins + " minutes "; 
     } 

     if (seconds > 0) { 
      duration += seconds + " seconds "; 
     } 

     response.duration = duration; 

     // format workout dates 
     var y = response.date; 
     var z = moment(y).format('dddd, MMM Do YYYY'); 

     response.date = z; 
    }); 

    return mergedCollection; 
}