Instead of using jquery, I prefer working with a custom handler for the $(window).resize(function () { ... event.
If there is a way to achieve this without relying on jquery, please feel free to share it in the comments below.
The code snippet below shows that the resize event couldn't bind when placed in my app-root.cshtml:
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
};
Thank you in advance for your assistance :)