Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    knockout-undoredopublic

    npm version Build Status Dependency Status devDependency Status Known Vulnerabilities

    Knockout Undo-Redo

    Generic undo/redo history-management for knockout observables.

    Install

    $ npm install knockout-undoredo

    Usage

    Heads up: knockout-undoredo is only available via npm, thus it expects to be run in an node.js environment with require() and everything. If you want to use it in the browser you'll have to browserify the final code.

    import ko from 'knockout';
    import UndoManager from 'knockout-undoredo';
     
    class ViewModel {
        constructor() {
            this.name = ko.observable('Obama');
            this.message = ko.pureComputed(() => `Thanks ${this.name()}`);
        }
    }
     
    const vm = new ViewModel();
     
    // Connect your viewmodel with the undomanager
    const undomanager = new UndoManager(vm);
     
    ko.applyBindings(vm);
     
    // ... and later
     
    console.log(vm.message()); // Thanks Obama
    vm.name('Trump');
    console.log(vm.message()); // Thanks Trump
    undomanager.undo();
    console.log(vm.message()); // Thanks Obama
    undomanager.redo();
    console.log(vm.message()); // Thanks Trump

    Create changesets as an undo/redo step

    knockout-undoredo has the ability to collect multiple changes over a defined time as a changeset. These collections will be merged to just one undo/redo step in the history timeline.

    // ...
     
    const undomanager = new UndoManager(vm, {throttle: 300});
     
    console.log(vm.message()); // Thanks Obama
    vm.name('Trump');
    vm.name('Clinton');
    console.log(vm.message()); // Thanks Clinton
    undomanager.undo();
    console.log(vm.message()); // Thanks Obama

    Constructor Options

    Prop Type Default Description
    throttle integer 300 Timeout in which changes will be collected into a changeset
    steps integer 30 Stack size for undoable/redoable changes

    Taking manual snapshots

    Snapshots are a collection of operations as one undo step. You can configure which operations should be bundled through the throttle contructor option. Besides that you can always manually trigger a snapshot through undomanager.takeSnapshot():

    // ...
     
    const undomanager = new UndoManager(vm, {throttle: 300});
     
    console.log(vm.message()); // Thanks Obama
    vm.name('Trump');
     
    // Take an early snapshot
    undomanager.takeSnapshot()
     
    vm.name('Clinton');
    console.log(vm.message()); // Thanks Clinton
    undomanager.undo();
    console.log(vm.message()); // Thanks Trump

    Skipping observables

    By default all enumerable properties of an object will be subscribed to. If you want to skip a knockout obersvable you can modify the object's enumerable property:

    Object.defineProperty(obj, 'key', {
      enumerable: false,
    });

    If you are one of the lucky guys who can make use of ES2016+ features in your code (i.e. through babel) you can simply import the nonenumerable decorator from the core-decorators module, or anything alike.

    import {nonenumerable} from 'core-decorators';
     
    class Example {
        @nonenumerable
        unobserved = ko.observable();
    }

    That way you can still explicitly reference the variable in your code, but it won't be collected by for-loops and Object.keys, Object.values or Object.entries respectively. Remember that it'll still be visible to Object.getOwnPropertyNames!

    TODOs

    • Implement proper garbage collection for old listeners (2016-11-24)
    • Make knockout-undoredo's properties observable themselves. (steps, throttle, past, future, subscriptions, recording) (2016-11-24)
    • implement hasUndo() and hasRedo(), as an observable of course (2016-12-06)

    Build & Release

    gulp do-release --patch
    git push
    npm publish

    install

    npm i knockout-undoredo

    Downloadsweekly downloads

    2

    version

    1.2.5

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar