2014-12-03 158 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; 
}