我正在使用带打字稿的敲除功能，无法触发或触发窗口调整大小事件

Question

我不想使用jquery，因为它正在与$(window).resize(function () { ...一起使用自定义处理程序。

如果不使用jquery无法实现，请在这里也进行评论。

如果编写如下代码，则不会显示任何错误，调整大小事件无法绑定：

我的[[app-root.cshtml

<app-root></app-root>

<template id="app-root-template">
    <div data-bind="event: { resize: mainWindowResize }">
        <partial name="nav-menu/nav-menu" />
        <div class="row">
            <div class="col-sm-12">
                <partial name="error-message/error-message" />
            </div>
            <div>

            </div>
        </div>
    </div>
</template>

我的
app-root-viewmodel.ts

import ko from "knockout";
import { registerComponent } from "../../infrastructure/register-component";

/**
 * Application Root
 *   Provides an application root container for components
 */
class AppRootViewModel {
    constructor() {

        registerComponent("nav-menu");
        registerComponent("error-message");

}

    public mainWindowResize = () => {
        console.log("Window resize");
    }

}

export default {
    template: { element: "app-root-template" },
    viewModel: AppRootViewModel
};

预先感谢您的帮助：）

Answer 1

div标签不支持窗口调整大小事件。它仅在body标签上受支持。 （请参阅：https://www.w3schools.com/tags/ev_onresize.asp）。您需要在不添加jquery的情况下在窗口上添加resize事件：

window.addEventListener('resize', /* your function here */);

如果您在AppViewModel中执行此操作，则这与MVVM模式不符。因为您在ViewModel中使用视图逻辑。敲除提供了针对此问题的解决方案，名为bindingHandlers或customBinding（请参阅：https://knockoutjs.com/documentation/custom-bindings.html）。使用bindingHandler，可以在window元素的div上注册调整大小事件，然后从中调用函数。这是一个示例：
BindingHandler：
ko.bindingHandlers.windowResize = {
    init: function(element, valueAccessor) {
        const callback = valueAccessor();
        window.addEventListener('resize', callback);

        ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
            window.removeEventListener('resize', callback);
        });
    }
};

您的HTML：
<app-root></app-root>

<template id="app-root-template">
    <div data-bind="windowResize: mainWindowResize">
        <partial name="nav-menu/nav-menu" />
        <div class="row">
            <div class="col-sm-12">
                <partial name="error-message/error-message" />
            </div>
            <div>

            </div>
        </div>
    </div>
</template>