0

基本的な時間追跡クロム拡張機能を開発していますが、FlipClock.js (jQuery プラグイン) と Knockout を統合する際に問題が発生しました。

目標は、関連する HTML の foreach バインディング テンプレートを作成し、FlipClock をインスタンス化することです。合計 4 つの FlipClock まで。現在、FlipClock から次のエラーが発生しています:「カウントダウンが既に 0 のときにタイマーを開始しようとしています」。私の推測では、これは「Knockout is destroy your Flipclock when the viewmodel updates.」の略だと思います。

私の質問はこれです: フリップクロックがノックアウト ビューモデルで更新されないようにする方法はありますか?

以下に関連するコードを貼り付けました。

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

コンストラクターは、インスタンス化される前にFlipClockTimerのメソッドを呼び出そうとしています。行を移動する

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れます(つまり、それらはすばやく連続して呼び出されます)。渡されるものが関数呼び出しの結果ではなく関数参照になるように、括弧を外す必要があります。stopreset

于 2013-12-04T05:59:21.943 に答える