Question

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

目标是使foreach绑定模板具有相关的HTML并实例化FlipClock;最多共有四个FlipClocks。目前，我从FlipClock收到以下错误：'当倒计时已经为0时尝试启动计时器'。我的猜测是，这是“当视图模型更新时，Knockout正在破坏你的flipclock。”

我的问题是：有没有办法阻止使用knockouts viewmodel更新flipclocks？

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

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>

Answer 1

您的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方法被称为（这意味着它们会被快速连续调用），而不是单击按钮时。您需要关闭括号，以便传递的是函数引用，而不是函数调用的结果。

使用knockout.js＆amp; flipclock.js

1 个答案: