Knockout打字稿扩展器

时间:2013-03-12 09:41:00

标签: knockout.js typescript

有人可以发布一个在打字稿中扩展一个观察者的例子吗? 淘汰赛扩展器:http://knockoutjs.com/documentation/extenders.html

我在2013年3月6日使用此版本的knockout.d.ts https://github.com/borisyankov/DefinitelyTyped/tree/master/knockout

编辑: 非常感谢你!因此,为了扩展你只需要添加KnockoutExtenders接口,以便打字稿将“允许”它。实施例

interface KnockoutExtenders {
    logChange(target: any, option: string): KnockoutObservableAny;
}

ko.extenders.logChange = function (target, option) {
    target.subscribe(function (newValue) {
    console.log(option + ": " + newValue);
    });
return target;
};

在viewmodel中声明如下:

this.score = ko.observable(score).extend({ logChange: "score" });

2 个答案:

答案 0 :(得分:4)

打字稿中的接口是开放式的,因此您可以在多个位置添加它们。

例如数字。您需要将此成员应用于扩展程序以及您的可观察对象。这是一个例子:

interface KnockoutExtenders {
    numeric(target: any, precision: number): KnockoutObservableAny;
}
interface KnockoutObservableNumber {
    extend(data: any): KnockoutObservableNumber;
}
ko.extenders.numeric = function (target: KnockoutObservableNumber, digits) {
    var result = ko.computed({
        read: function () {
            var value = target();
            var toret: string = value.toString();
            if (toret.length < digits) {
                toret = "0" + toret;
            }
            else if (toret.length > digits) {
                toret = toret.substring(0, digits);
            }
            return toret;
        },
        write: target
    });

    result(target());
    return result;
};

您可以在此处查看完整示例:https://github.com/basarat/ChessClock/blob/d82a565ac9720cce00c75f099fcf7003f496755a/ChessClock/ChessClock/www/main.ts

答案 1 :(得分:1)

基于评论进行更新:在这种情况下,您只需将界面分别扩展到定义文件:

interface KnockoutExtenders {
    logChange: (target: KnockoutObservableAny, option: string) => KnockoutObservableAny;
}