Question

我是Ractive.js的新手。我需要实现一个即使我点击另一个页面也会运行的秒表。我的秒表正在运行但是当我点击另一页然后回到我当前的页面时，秒表就不见了。有人可以帮我这个吗？以下是我的尝试：

在我的视图中＆gt;＆gt;＆gt;

<div class="modal-footer">
        <div class="form-group">
            <div class="pull-left">
                Stopwatch: {{#stopWatch}} {{hours}} h: {{minutes}} m: {{seconds}} s{{/stopWatch}}
            </div>
            <button id="btnStart" class="btn btn-primary" type="button" on-click="startStopWatch">Start</button>
            <button id="btnReset" class="btn btn-secondary" type="button" on-click="startStopWatch">Reset</button>
        </div>
        <label class="pull-left stopWatch">  Time Spent:</label>
    </div>

我的startStopWatch功能＆gt;＆gt;＆gt;

function startStopWatch(ev, cfg) {
    var rjs = this || cfg.rjs;
    var $btn = $(ev.node);
    var btnText = $btn.text();
    var sg;

    if (btnText === 'Start') {
        $btn.html('Stop');
        sg = new cmnDt.stopWatch();
        sg.start(rjs, sg);
    } else if (btnText === 'Stop'){
        $btn.html('Start');
        sg = ev.context.sw;
        sg.stop(rjs, sg);
    }

    if (btnText === 'Reset' && ev.context.sw) {
        sg = ev.context.sw;
        sg.reset(rjs, sg);
        $('#btnStart').html('Start');
    }
}

我的秒表功能＆gt;＆gt;＆gt;

function stopWatch() {

        var currentSeconds = 0;
        var currentMinutes = 0;
        var currentHours = 0;
        var timer;

        function start(rjs, sw) {
            printTime(rjs, sw);
            timer = setInterval(function () {
                getTime();
                printTime(rjs, sw);
            }, 1000);
        }

        function getTime(rjs) {
            currentSeconds = currentSeconds + 1;
            if (currentSeconds === 60) {
                currentMinutes += Math.round((currentSeconds) / 60);
                currentSeconds = 0;
            } else if (currentSeconds === 60 && currentMinutes === 60) {
                currentMinutes = 0;
                currentSeconds = 0;
                currentHours += 1;
            }
        }

        function printTime(rjs, sw) { 
            rjs.set({'sw': sw, 'stopWatch.seconds': currentSeconds, 
                    'stopWatch.minutes': currentMinutes, 'stopWatch.hours': currentHours});
        }

        function stop(rjs, sw) {
            clearInterval(timer);
            printTime(rjs, sw);
            $('.stopWatch').text(' Time Spent: ' + currentMinutes + ' m : ' + currentSeconds + ' s.');
        }

        function reset(rjs, sw) {
            clearInterval(timer);
            currentSeconds = 0;
            currentMinutes = 0;
            currentHours = 0;
            printTime(rjs, sw);
        }

        return {
            start: start,
            stop: stop,
            reset: reset
        };
    }

Answer 1

如果您更改网站并返回，则会从头开始初始化整个脚本。您需要永久存储秒表的当前值和当前值的时间戳。

为此，有两个选项：本地storage和cookies。

在ractive中，以下是一个如何使用本地存储的示例：http://examples.ractivejs.org/todos

如果您实施一个功能saveToStorage()和一个initFromStorage()，那么您的秒表可能会显示您回到该网站的真实时间。但请注意，秒表并非“在某些背景下运行”。它只是从存储的最后一刻开始初始化。这是至关重要的，因为例如当您在另一个站点时，您的秒表不能触发事件。

编辑15.3.16

在这里找到一个小提琴中的工作秒表：

https://jsfiddle.net/cw67L17e/2/

我开始改变您的代码，但我认为最好从头开始设计。我没时间深入了解ractivejs的特色。但我希望你能通过研究它来学习一些新的有用的想法。如何使用的简短提示是在右边的小提琴。

说明：

只是为了测量时间，你不需要狭义的“秒表”。正如您将看到的，存储时间戳就足够了。您实际上只需要prepareToLeave()和resume()方法。
我建议不要将秒，分和小时作为组合类型处理。只需处理时间戳并在必要时进行转换，如millisToHMS()所示。因为处理millis是一种通用的方法，也允许许多其他任务。
考虑localStorage.setItem()和localStorage.getItem()。
如果您想自动化，可以在文档准备好或加载（resume()）后立即致电document.ondomcontentready。在那里你必须找到你的ractivejs方式。

在请求之间使秒表活着

1 个答案: