我在无法触发或触发 window-resize 事件的地方使用带有打字稿的敲除

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 标签不支持 window 调整大小事件。它仅在 body 标签上受支持。（参见：https://www.w3schools.com/tags/ev_onresize.asp）。您需要在 window 上添加调整大小事件，无需 jquery:

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

如果您在 AppViewModel 中执行此操作，则违反了 MVVM 模式。因为您在 ViewModel 中使用视图逻辑。 Knockout 为这个问题提供了解决方案，命名为 bindingHandlers 或 customBinding（参见：https://knockoutjs.com/documentation/custom-bindings.html）。使用 bindingHandler，您可以在 div 元素的 window 上注册调整大小事件，并从中调用您的函数。这是一个例子：

绑定处理程序：

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>

这是一个 JSFiddle 示例：https://jsfiddle.net/FleMo/2h9s586k/2/

编辑：添加了一个 JSFiddle

我在无法触发或触发 window-resize 事件的地方使用带有打字稿的敲除

I am using knockout with typescript where i am not able to fire or trigger window-resize event

javascript

jquery

window-resize

knockout.js

typescript