带有打字稿的Knockout组件

Question

我试图使用组件为我们的SPA实现打字稿，但我似乎无法处理组件中的视图模型。

当我们使用Javascript和Knockout执行此操作时，我将声明一个observable属性作为回调传入，并让组件viewmodel用自身填充observable，让我可以访问任何函数作为该viewmodel的一部分，例如：

组件：

      ko.components.register('MessageBox', {
    viewModel: function (params) {
        init: {
            var self = this;

            // Button Events
            self.OkButton_Click = function () {
                self.FireResponse(self.Response.Ok);
            };
            self.CancelButton_Click = function () {
                self.FireResponse(self.Response.Cancel);
            };
            self.YesButton_Click = function () {
                self.FireResponse(self.Response.Yes);
            }
            self.NoButton_Click = function () {
                self.FireResponse(self.Response.No);
            }
            self.AbortButton_Click = function () {
                self.FireResponse(self.Response.Abort);
            }
            self.BackButton_Click = function () {
                self.FireResponse(self.Response.Back);
            }
            self.Custom1Button_Click = function () {
                self.FireResponse(self.Response.Custom1);
            }
            self.Custom2Button_Click = function () {
                self.FireResponse(self.Response.Custom2);
            }
            // Enums
            self.Response = {
                Ok: "Ok",
                Cancel: "Cancel",
                Yes: "Yes",
                No: "No",
                Abort: "Abort",
                Back: "Back",
                Custom1: "Custom1",
                Custom2: "Custom2"
            }
            self.Config = {
                OKCancel: "OkCancel",
                OKBack: "OKBack",
                OK: "Ok",
                Cancel: "Cancel",
                YesNo: "YesNo",
                YesNoCancel: "YesNoCancel",
                Abort: "Abort",
                Custom1: "Custom1",
                Custom1Custom2: "Custom1Custom2",
                Custom1Cancel: "Custom1Cancel",
                Custom1Custom2Cancel: "Custom1Custom2Cancel",
                None: 'None'
            }

            // Functions
            self.FireResponse = function (responseCode) {
                self.ResetButtons();
                $.event.trigger({
                    type: "messageBoxResponse",
                    message: responseCode,
                    time: new Date()
                });

                if (typeof self.callback != 'undefined' && self.callback)
                    self.callback(responseCode);
            }
            self.ResetButtons = function () {
                self.ShowOk(false);
                self.ShowCancel(false);
                self.ShowYes(false);
                self.ShowNo(false);
                self.ShowAbort(false);
                self.ShowingMessageBox(false);
                self.ShowCustom1(false);
                self.ShowCustom2(false);
            }

            // Observables
            self.Text = ko.observable("This is a test message from the message box VM");
            self.SubText = ko.observable("");
            self.ShowingMessageBox = ko.observable(false);

            self.ShowOk = ko.observable(false);
            self.ShowCancel = ko.observable(false);
            self.ShowYes = ko.observable(false);
            self.ShowNo = ko.observable(false);
            self.ShowAbort = ko.observable(false);
            self.ShowBack = ko.observable(false);
            self.ShowCustom1 = ko.observable(false);
            self.ShowCustom2 = ko.observable(false);

            self.Custom1Text = ko.observable("Custom1");
            self.Custom2Text = ko.observable("Custom2");
            self.callback = null;

            // Accessable Functions
            self.ShowWithCustom = function (configuration, message, subMessage, custom1Text, custom2Text) {
                if (IsNullOrUndefined(custom1Text) == false) {
                    self.Custom1Text(custom1Text);
                }

                if (IsNullOrUndefined(custom2Text) == false) {
                    self.Custom2Text(custom2Text);
                }

                self.Show(configuration, message, subMessage);
            }
            self.Show = function (configuration, message, subMessage, callback) {
                self.Text(message);
                self.SubText(subMessage);
                self.callback = callback;
                switch (configuration) {
                    case self.Config.OKCancel:
                        self.ShowOk(true);
                        self.ShowCancel(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.OKBack:
                        self.ShowOk(true);
                        self.ShowBack(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.OK:
                        self.ShowOk(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.Cancel:
                        self.ShowCancel(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.YesNo:
                        self.ShowYes(true);
                        self.ShowNo(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.YesNoCancel:
                        self.ShowYes(true);
                        self.ShowNo(true);
                        self.ShowCancel(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.Abort:
                        self.ShowAbort(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.Custom1Cancel:
                        self.ShowCancel(true);
                    case self.Config.Custom1:
                        self.ShowCustom1(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.Custom1Custom2Cancel:
                        self.ShowCancel(true);
                    case self.Config.Custom1Custom2:
                        self.ShowCustom1(true);
                        self.ShowCustom2(true);
                        self.ShowingMessageBox(true);
                        break;
                    case self.Config.None:
                        self.ShowingMessageBox(true);
                        break;
                }
            }

            params.callback(self);
        }
    },
    template: '<div data-bind="ElementShow: ShowingMessageBox">\
                                <blackout/>\
                                    <div class="messageBoxWrapper">\
                                        <div class="messageBoxCell" data-bind="text:Text"></div>\
                                        <div class="messageBoxCell" style="font-weight:normal;" data-bind="text:SubText"></div>\
    <div class="messageBoxCell">\
                                        <div class="yesButton" data-bind="click: OkButton_Click, visible: ShowOk">OK</div>\
                                        <div class="yesButton" data-bind="click: YesButton_Click, visible: ShowYes">Yes</div>\
                                        <div class="yesButton" data-bind="click: Custom1Button_Click, visible: ShowCustom1, text:Custom1Text"></div>\
                                        <div class="yesButton" data-bind="click: Custom2Button_Click, visible: ShowCustom2, text:Custom2Text"></div>\
                                        <div class="noButton" data-bind="click: NoButton_Click, visible: ShowNo">No</div>\
                                        <div class="cancelButton" data-bind="click:AbortButton_Click, visible: ShowAbort">Abort</div>\
                                        <div class="cancelButton" data-bind="click:BackButton_Click, visible: ShowBack">Back</div>\
                                        <div class="cancelButton" data-bind="click: CancelButton_Click, visible: ShowCancel">Cancel</div>\
                                    </div>\
    </div>\
                            </div>'    });

在页面装订

        <div data-bind="component: { name: 'MessageBox', params: { callback: $root.MsgCallBack } }"></div>

我遇到的问题是，如果我在打字稿中尝试类似的方法，我会得到未定义的错误，我已经对谷歌进行了一些爬行，而且我很难找到能给我带来更多东西的东西这个方向。

我试过了：

a）声明一个Knockoutobservable属性int typescript并将其绑定到我的组件

b）实例化我的组件的实例并访问属性，但是这并不与我在页面上的实例相关联。

打字稿组件：

import * as i from "iComponent";
import * as ko from "knockout";
import * as c from "../../Tools/Common";   

export module MsgboxMod {


    export enum Response {
        Ok,
        Cancel,
        Yes,
        No,
        Abort,
        Back,
        Custom1,
        Custom2
    }

    export enum Config {
        OKCancel,
        OKBack,
        OK,
        Cancel,
        YesNo,
        YesNoCancel,
        Abort,
        Custom1,
        Custom1Custom2,
        Custom1Cancel,
        Custom1Custom2Cancel,
        None
    }


    export class MessageBox implements i.iComponent {

        // KO Wrappers
        ComputedBoolBuilder: c.CommonMod.Computed<boolean>
        Com: c.CommonMod.JQEvent;

        // Computed Variables
        ShowOk: KnockoutComputed<boolean>;
        ShowCancel: KnockoutComputed<boolean>;
        ShowYes: KnockoutComputed<boolean>;
        ShowNo: KnockoutComputed<boolean>;
        ShowAbort: KnockoutComputed<boolean>;
        ShowBack: KnockoutComputed<boolean>;
        ShowCustom1: KnockoutComputed<boolean>;
        ShowCustom2: KnockoutComputed<boolean>;

        // Observable Properties
        ShowMe: KnockoutObservable<boolean>;
        Text: KnockoutObservable<string>;
        SubText: KnockoutObservable<string>;
        Custom1Text: KnockoutObservable<string>;
        Custom2Text: KnockoutObservable<string>;

        Configuration: KnockoutObservable<Config>;



        constructor() {
            this.ComputedBoolBuilder = new c.CommonMod.Computed<boolean>(this);
            this.Com = new c.CommonMod.JQEvent("messageBoxResponse");
            this.WireUp();
            this.Init();
        }

        Init = function () {
            this.ShowMe = ko.observable(false);
            this.Text = ko.observable("Init mode");
            this.SubText = ko.observable("");
            this.Custom1Text = ko.observable("");
            this.Custom2Text = ko.observable("");
            this.Configuration = ko.observable(Config.OK);
        }

        // Generic Functions
        Show = function (text: string) {
            this.ShowMe(true);
            this.Text(text);
        }

        Hide = function () {
            this.ShowMe(false);
        }

        Reset = function () {

        }

        private WireUp = function () {
            this.ShowOk = this.ComputedBoolBuilder.Wire(this.ShowOKButton);
            this.ShowCancel = this.ComputedBoolBuilder.Wire(this.ShowCancelButton);
            this.ShowYes = this.ComputedBoolBuilder.Wire(this.ShowYesButton);
            this.ShowNo = this.ComputedBoolBuilder.Wire(this.ShowNoButton);
            this.ShowAbort = this.ComputedBoolBuilder.Wire(this.ShowAbortButton);
            this.ShowBack = this.ComputedBoolBuilder.Wire(this.ShowBackButton);
            this.ShowCustom1 = this.ComputedBoolBuilder.Wire(this.ShowCustom1Button);
            this.ShowCustom2 = this.ComputedBoolBuilder.Wire(this.ShowCustom2Button);
        }

        FireResponse(responseCode: string) {
            this.Reset();
            this.Com.FireResponse(responseCode);
            this.Hide();
        }

        // Click Functions
        OkButton_Click = function () {
            this.FireResponse("OK");
        }
        CancelButton_Click = function () {
            this.FireResponse("Cancel");
        };
        YesButton_Click = function () {
            this.FireResponse("Yes");
        }
        NoButton_Click = function () {
            this.FireResponse("No");
        }
        AbortButton_Click = function () {
            this.FireResponse("Abort");
        }
        BackButton_Click = function () {
            this.FireResponse("Back");
        }
        Custom1Button_Click = function () {
            this.FireResponse("Custom1");
        }
        Custom2Button_Click = function () {
            this.FireResponse("Custom2");
        }

        // Calculation Function
        ShowOKButton = function (): boolean {
            switch (this.Configuration()) {
                case Config.OKBack:
                case Config.OK:
                case Config.OKCancel:
                    return true;
                default:
                    return false;
            }
        }
        ShowCancelButton = function (): boolean {
            switch (this.Configuration()) {
                case Config.Cancel:
                case Config.OKCancel:
                case Config.Custom1Cancel:
                case Config.Custom1Custom2Cancel:
                case Config.YesNoCancel:
                    return true;
                default:
                    return false;
            }
        }
        ShowYesButton = function (): boolean {
            switch (this.Configuration()) {
                case Config.YesNo:
                case Config.YesNoCancel:
                    return true;
                default:
                    return false;
            }
        }
        ShowNoButton = function (): boolean {
            switch (this.Configuration()) {
                case Config.YesNo:
                case Config.YesNoCancel:
                    return true;
                default:
                    return false;
            }
        }
        ShowAbortButton = function (): boolean {
            switch (this.Configuration()) {
                case Config.Abort:
                    return true;
                default:
                    return false;
            }
        }
        ShowBackButton = function (): boolean {
            switch (this.Configuration()) {
                case Config.OKBack:
                    return true;
                default:
                    return false;
            }
        }
        ShowCustom1Button = function (): boolean {
            switch (this.Configuration()) {
                case Config.Custom1:
                case Config.Custom1Cancel:
                    return true;
                default:
                    return false;
            }
        }
        ShowCustom2Button = function (): boolean {
            switch (this.Configuration()) {
                case Config.Custom1Custom2:
                case Config.Custom1Custom2Cancel:
                    return true;
                default:
                    return false;
            }
        }
    }
}

HTML模板：

<div data-bind="visible: ShowMe">
    <blackout/>
        <div class="messageBoxWrapper">
            <div class="messageBoxCell" data-bind="text: Text"></div>
            <div class="messageBoxCell" style="font-weight:normal;" data-bind="text: SubText"></div>
            <div class="messageBoxCell">
            <div class="yesButton" data-bind="click: OkButton_Click, visible: ShowOk()">OK</div>
            <div class="yesButton" data-bind="click: YesButton_Click, visible: ShowYes()">Yes</div>
            <div class="yesButton" data-bind="click: Custom1Button_Click, visible: ShowCustom1(), text:Custom1Text"></div>
            <div class="yesButton" data-bind="click: Custom2Button_Click, visible: ShowCustom2(), text:Custom2Text"></div>
            <div class="noButton" data-bind="click: NoButton_Click, visible: ShowNo()">No</div>
            <div class="cancelButton" data-bind="click:AbortButton_Click, visible: ShowAbort()">Abort</div>
            <div class="cancelButton" data-bind="click:BackButton_Click, visible: ShowBack()">Back</div>
            <div class="cancelButton" data-bind="click: CancelButton_Click, visible: ShowCancel()">Cancel</div>
        </div>
    </div>
</div>

注册 （目前我在为我的父虚拟机调用ko.applyBindings之前执行此操作）

ko.components.register("MessageBox", {
    viewModel: msg.MsgboxMod.MessageBox,
    template: { require: "text!TypeScript/Views/MessageBox.html" }
});

据我所知，我的组件绑定得很好，我只是无法弄清楚如何抓住绑定到页面的实例上的方法，例如我需要能够调用＆ ＃34;显示＆＃34;和＆＃34;隐藏＆＃34;任何帮助都会很棒！

Answer 1

好吧，这对我尝试测试代码的地方（通过在应用绑定后调用我的VM上的方法）产生了误解。我打电话的地方是在组件构建之前。我把东西拖了一下，然后整理好了！