在durandaljs或knockoutjs中自动调用函数
在durandaljs或knockoutjs中自动调用函数
提问于 2014-12-11 11:59:45
我有一个应用程序，显示活动的相对时间使用矩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实现同样的目标。
回答 2
Stack Overflow用户
发布于 2014-12-11 16:14:51
durandal中的视图有一个生命周期，因此您可以使用事件来启动(当视图被激活时)和停止(当视图被禁用时)一个javascript计时器。在您的模型中添加一个ko可观察到的称为time_spent_trigger的ko。添加另一个可观察到的ko，称为time_spent_formatted，它执行所有的矩计算，并返回最终结果，但在顶部，使其以某种方式引用time_spent_trigger。在您的视图中，绑定到time_spent_formatted属性而不是time_spent属性。在activate事件中，启动一个计时器，它每秒钟更新一次time_spent_trigger。在停用事件中，取消此计时器。更新time_spent_trigger的值将导致可观察到的计算值发生更改并在视图上进行更新。
联署材料：
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>Stack Overflow用户
发布于 2014-12-13 11:17:33
所以你基本上需要一个相对计时器，对吧？
我们需要有人告诉我们现在的时间是什么。
//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
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27422359
复制相关文章
相似问题
腾讯云开发者
