0

我正在开发一个基本的时间跟踪 chrome 扩展，并且遇到了将 FlipClock.js（一个 jQuery 插件）与 Knockout 集成的问题。

目标是为相关的 HTML 提供一个 foreach 绑定模板并实例化一个 FlipClock；最多总共四个 FlipClock。目前，我从 FlipClock 收到以下错误：“尝试在倒计时已为 0 时启动计时器”。我的猜测是，这是“当视图模型更新时淘汰赛正在破坏你的翻转时钟”的缩写。

我的问题是：有没有办法防止翻转时钟被淘汰视图模型更新？

我已经粘贴在下面的相关代码中。

JS：

function Timer (name) {

    //Declaring Observables, etc.
    var timer = this;
        timer.name = ko.observable(name);
        timer.format = function () {
            return name.replace(/ /g, '');
        };
        timer.key = (timer.format()+ Math.floor((Math.random()*1000000000000)+1));
        timer.clock = $('#' + timer.key + '').FlipClock({countdown: false, autoStart: true, ClockFace: 'HourlyCounter'});
        timer.started = ko.observable(false);
        timer.running = ko.observable(false);
        timer.stopped = ko.observable(false);
        timer.reset = ko.observable(false);
        timer.cleared = ko.observable(false);
        timer.value = timer.clock.getTime();
        timer.start = timer.clock.start();
        timer.stop = timer.clock.stop();
        timer.reset = timer.clock.reset();

//Time Tracker Viewmodel
function ViewModel () {
    var self = this;
        self.timers = ko.observableArray([]);

    //New Timer Method
    self.createTimer = function () {
        var name = $('.projectInput').val(),
            css = name.replace(/ /g, '');
            self.timers.push(new Timer(name));
            $('.projectInput').val("");
    }
}
//Applying bindings to view model
ko.applyBindings (new ViewModel());
});

HTML：

<div class="timers" data-bind="foreach: timers()">
        <div class="instance">
            <div class="timerUI">
                <div class="title" data-bind="text: name()"></div>
                <div class="controls">
                    <div class="start button" data-bind="click: clock.start()"></div>
                    <div class="stop button" data-bind="click: clock.stop()"></div>
                    <div class="reset button" data-bind="click: clock.reset()"></div>
                    <div class="clear button" data-bind="click: $parent.clearTimer"></div>
                </div>
            </div>
            <div class="time" data-bind="attr: {id: key}"></div>
        </div>
    </div>
4

1 回答 1

0

您的Timer构造函数试图在实例化之前调用 FlipClock 的方法。移动线

timer.clock = $('#' + timer.key + '').FlipClock({countdown: false, autoStart: true, ClockFace: 'HourlyCounter'});

在任何引用的代码之前timer.clock（这应该会导致错误消息；当您遇到此类神秘的不当行为时，请确保您打开了控制台和调试器）。

更新

<div class="start button" data-bind="click: clock.start()"></div>
<div class="stop button" data-bind="click: clock.stop()"></div>
<div class="reset button" data-bind="click: clock.reset()"></div>

start和方法是在评估绑定时调用的（这意味着它们被快速连续调用），而不是在单击按钮时stop。您需要去掉括号，以便传递的是函数引用，而不是函数调用的结果。reset

于 2013-12-04T05:59:21.943 回答