Question

我有一个应用程序，它使用时刻js插件显示活动相对时间。时间会自动刷新，与当前时间和显示进行比较（如facebook newsfeed）。 App以前用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中的视图有life cycle，因此您可以使用事件启动（当视图被激活时）和停止（当视图被停用时）javascript计时器。在模型中添加一个名为time_spent_trigger的ko observable。添加另一个名为time_spent_formatted的ko计算observable，它会执行所有时刻计算并返回最终结果，但在顶部，使其以某种方式引用time_spent_trigger。在您的视图中，绑定到time_spent_formatted属性而不是time_spent属性。在activate事件中，启动一个每秒更新time_spent_trigger的计时器。在deactivate事件中，取消此计时器。更新time_spent_trigger的值将导致计算的observable在视图上更改并更新。

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>

Answer 2

所以你基本上需要一个相对计时器，对吧？

我们需要有人告诉我们当前的时间。

//clock.js    
define(function (require) {
    var
        events = require('durandal/events'),
        moment = require('moment'),
        clock = {};

    events.includeIn(clock);

    setInterval(function () {
        clock.trigger('time:changed', moment());
    }, 1000);

    return clock;
});

这是如何使用时钟事件的相对计时器。

//timer.js
define(function (require) {
    var
        ko = require('knockout'),
        moment = require('moment'),
        startTime = ko.observable(null),
        relativeTime = ko.observable(),

        start = function () {
            startTime(moment());
        },
        stop = function () {
            startTime(null);
        },
        clock = require('clock');

    clock.on('time:changed').then(function (time) {
        startTime() && relativeTime(moment.duration(time, startTime()).humanize());
    });

    return {
        relativeTime: relativeTime, //use data-bind="text: relativeTime"
        start: start,
        stop: stop
    }

});

durandaljs或knockoutjs中的自动呼叫功能

2 个答案: