Я использую нокаут с машинописью, когда я не могу запустить или вызвать событие изменения размера окна

Question

Я не хочу использовать jquery, так как он работает с $(window).resize(function () { ... с помощью пользовательского обработчика.

Если это невозможно без использования jquery тогда, пожалуйста, также прокомментируйте здесь.

Это не показывает мне никакой ошибки, если код, написанный как ниже, событие изменения размера не может связать :

my app- root .cs html

<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>

my 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:

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

Если вы сделаете это в вашей AppViewModel, это против шаблона MVVM. Потому что вы используете View Logi c в ViewModel. Knockout предоставляет решение этой проблемы с именем 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>

Вот пример JSFiddle: https://jsfiddle.net/FleMo/2h9s586k/2/

Редактировать: добавлен JSFiddle