javascript - durandaljs 或 knockoutjs 中的自动调用功能

Question

我有一个应用程序，它使用 moment js 插件显示事件相对时间。时间会自动刷新，与当前时间进行比较并显示(如 Facebook 新闻源)。应用程序之前是用 angularjs 编写的，我使用以下代码构建了此功能:
JS:

filter('convertSeconds', function() {
        return function(seconds) {
            if( typeof(seconds) == 'undefined' ) return;
            // units is a string with possible values of y, M, w, d, h, m, s, ms
            var duration = moment.utc().subtract(seconds, 'seconds'), format = "";

            if( duration.day() > 0 ) { format += "DD [days] "; }

            if(duration.hour() > 0){ format += "H [hours] "; }

            if(duration.minute() > 0){ format += "m [minutes] "; }

            format += " s [seconds]";

            return duration.fromNow(true);
        }
    }).

HTML:

<div class="time-spent">
   <i class="fa fa-clock-o mrs fa-2"></i>
   {{me.current.activity.time_spent|convertSeconds}}
</div>

AngularJS 过滤器每秒自动调用一次，因此时间会刷新，我不必处理这个问题。

现在应用程序正在被重写，js 框架从 angularjs 转移到 durandaljs(根据客户要求)，我不知道如何使用 durandaljs 实现同样的目标。

Answer 1

durandal 中的 View 有 life cycle因此您可以使用事件来启动(当 View 被激活时)和停止(当 View 被停用时)JavaScript 计时器。将名为 time_spent_trigger 的 ko observable 添加到您的模型中。添加另一个名为 time_spent_formatted 的 ko 计算可观察量，它会执行所有时刻计算并返回最终结果，但在顶部，使其以某种方式引用 time_spent_trigger。在您看来，绑定(bind)到 time_spent_formatted 属性而不是 time_spent 属性。在 activate 事件中，启动一个每秒更新 time_spent_trigger 的计时器。在 deactivate 事件中，取消该定时器。更新 time_spent_trigger 的值将导致计算的可观察量发生变化并在 View 上更新。

JS:

define([
    'durandal/system',
    'knockout'
    ],
    function (system, ko) {
        var vm = {
            time_spent = ko.observable(),
            time_spent_trigger = ko.observable(0),
            activate: activate,
            deactivate: deactivate,
            updateTimerId = 0
        };

        vm.time_spent_formatted = ko.computed(function () {
          //reference the trigger observable in some way
          if (vm.time_spent_trigger() > 0)
          {
              //do your moment calculation and return here
              return result_of_moment_calculation
          } else {
              return "Not Started";
          }
        }

        return vm;

        function activate() {

            vm.updateTimerId = setInterval(function () {
                vm.time_spent_trigger(vm.time_spent_trigger() + 1);
            }, 10000);

        }

        function deactivate() {
            clearInterval(vm.updateTimerId);
        }
    });

HTML:

<div class="time-spent">
  <i class="fa fa-clock-o mrs fa-2"></i>
  <span data-bind="text: time_spent_formatted"></span>
</div>