使用 moment.js 和 angularfire 的 .startAt(thisWeek) 和 .endAt(nextWeek) 最有效的逻辑是什么？答案

【问题标题】：What is the most efficient logic to .startAt(thisWeek) and .endAt(nextWeek) using moment.js and angularfire?使用 moment.js 和 angularfire 的 .startAt(thisWeek) 和 .endAt(nextWeek) 最有效的逻辑是什么？
【发布时间】：2014-09-25 03:12:57
【问题描述】：

“高效”是一种很好的说法，我想不出一个好的方法来做到这一点！

我很难弄清楚如何设置当前周并在新的 Firebase 记录中引用它，然后在当前周的上下文中转到上一周和下一周。

var ref = new Firebase('https://plnkr.firebaseio.com/tasks').startAt(start).endAt(end);

这是我正在使用的参考。 startAt() 基于当前周的开始， endAt() 是在那之后的 7 天。但是我无法设置一个新的参考来添加或删除从开始到结束的 7 天。

希望这至少有点道理。

这里是 plnkr 到目前为止的代码：http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm?p=preview

我需要以某种方式修改现有的 ref 吗？如果我创建一个新的 ref 是否会正确传递给范围？

任何帮助将不胜感激。

angular.module('app').controller('MainCtrl', function($firebase, $scope) {


  var populateTasks = function(start, end){
    var ref = new Firebase('https://plnkr.firebaseio.com/tasks').startAt(start).endAt(end);
    var list = $firebase(ref).$asArray();
    $scope.list = list;
  }; 

  //initialize week
  var today = moment();
  var startThisWeek = today.startOf('week').valueOf();
  var endThisWeek = today.startOf('week').add(7, 'd').valueOf(); 
  var thisWeek = today.startOf('week');
  populateTasks(startThisWeek, endThisWeek);

  $scope.currentWeek = startThisWeek;

  var weekInMilli = moment.duration(1, 'weeks').valueOf();

  //set next week
  $scope.nextWeek = function(){
    $scope.currentWeek += weekInMilli;
    var startNextWeek = thisWeek.add(7, 'd').valueOf();
    var endNextWeek = thisWeek.add(14, 'd').valueOf();
    populateTasks(startNextWeek, endNextWeek);
  };
  //set previous week
  $scope.prevWeek = function(){
    $scope.currentWeek -= weekInMilli;
    var startLastWeek = thisWeek.subtract(7, 'd').valueOf();
    var endLastWeek = thisWeek.subtract(14, 'd').valueOf();
    populateTasks(startLastWeek, endLastWeek);
  };

  var last = null;
  $scope.priorityChanged = function(priority) {
    var current = moment(priority).startOf('day');
    var changed = last === null || !last.isSame(current);
    last = current;
    return changed;
  };

  $scope.getDayName = function($priority) {
    return moment($priority).format('dddd');
  };

  $scope.addTask = function(newTask) {
    $scope.list.$add({
      title: newTask.title,
      $priority: Firebase.ServerValue.TIMESTAMP
    });
  };

});

//view
<body ng-controller="MainCtrl">
    The current week is {{currentWeek | date}}<br/>
    <button ng-click="prevWeek()">previous week</button>
    <button ng-click="nextWeek()">next week</button>
    <form ng-submit="addTask(task); task.title=null">
      <input placeholder="Add Task" ng-model="task.title"/>
    </form>

    <li ng-repeat="item in list" ng-init="changed = priorityChanged(item.$priority)">
     <h3 ng-show="changed">{{getDayName(item.$priority)}}</h3>
     {{item.title}}  
    </li>

【问题讨论】：

这里的一切看起来都相当可靠。我不确定你的问题是什么。您是否在创建“任务”时为其设置了 $priority ？如果您将其设置为时间戳，那么您应该已准备就绪。
我的解决方案在几周之间没有正确过渡。我看不到如何修改新的 ref 并在我经历几周并将任务添加到不同的几周范围时反映出来。如果您尝试 plunk，则代码实际上不起作用。
嗯，我检查了 plunk :( 看看the values for your priorities，它们都在同一天。下周什么都不会出现，因为那里没有有效值。添加一个值为当前时间戳添加它，所以我仍然不确定 plunkr 是否解释了问题 - 它似乎按预期工作。
抱歉@Kato 一直在打扰您，但我认为我没有正确解释问题。当我单击 nextWeek() 然后单击返回 prevWeek() 时，它不会显示我最初添加的任务。向前和向后移动 nextweek() 和 preWeek() 的最佳方式是什么？
我想我明白了。现在我传入 $scope.startThisWeek 并在将其传递给 populateTasks 函数时对其进行修改。这是最新的 plunk：plnkr.co/edit/A8lDKbNvhcSzbWVrysVm

标签： javascript angularjs firebase momentjs angularfire

【解决方案1】：

这里有一个 plunkr，显示了一种方法：http://plnkr.co/edit/A8lDKbNvhcSzbWVrysVm

通常，我根据当前周使用开始和结束日期来初始化一周。然后我将这些值添加到 $scope。当我需要前进或后退一周时，我会为这些值增加一周的时间，然后将它们传递回 populateTasks 函数。

 //access a range in the array based on the week. My list is sorted by $priority timestamps. 
 var populateTasks = function(start, end) {
    $scope.start = start;
    $scope.end = end;
    var ref = new Firebase('https://plnkr.firebaseio.com/tasks').startAt(start).endAt(end);
    var list = $firebase(ref).$asArray();
    $scope.list = list;
  };

  //initialize the first week
  var setThisWeekStart = moment().startOf('week');
  var setThisWeekEnd = moment().startOf('week').add(7, 'days');
  $scope.startThisWeek = setThisWeekStart.valueOf();
  $scope.endThisWeek = setThisWeekEnd.valueOf();

  //get the tasks for the first week
  populateTasks($scope.startThisWeek, $scope.endThisWeek);

  //a week in milliseconds
  var weekInMilli = moment.duration(1, 'weeks').valueOf();

  //set next week
  $scope.nextWeek = function() {
    $scope.startThisWeek += weekInMilli;
    $scope.endThisWeek += weekInMilli;
    populateTasks($scope.startThisWeek, $scope.endThisWeek);
  };

  //set previous week
  $scope.prevWeek = function() {
    $scope.startThisWeek -= weekInMilli;
    $scope.endThisWeek -= weekInMilli;
    populateTasks($scope.startThisWeek, $scope.endThisWeek);
  };

我希望对某人有所帮助！感谢@Kato 的帮助。他提出了最初的解决方案，并为我的成功做好了准备。没有他是不可能做到的。

【讨论】：