Maximizing module loading efficiency with Knockout and Webpack

Question

Maximizing module loading efficiency with Knockout and Webpack

I have recently started using knockoutJs with TypeScript viewmodels and WebPack to bundle it all together.

Previously, without modules and webpack, I could write something like this:

<p data-bind="text: moment().format('L')">

However, now I am encountering an error: Message: moment is not defined

If I use moment within the viewmodel (e.g. by assigning it to a variable), it works just fine.

Here is my viewmodel.ts file:

import * as ko from 'knockout';
import * as moment from 'moment';

class TestViewModel {  
    test = moment().format('L'); 
}

ko.applyBindings(new TestViewModel(), document.getElementById('mainbinding'));

And in my view (cshtml partial page):

<pre data-bind="text: test"></pre> <!-- this works -->
<pre data-bind="text:moment().format('L')"></pre> <!-- this does not work-->

Can someone please help me identify what I might be missing?

typescript knockout.js webpack momentjs

Answer 1

Answer №1

When working with your viewModel, only the "public" properties are accessible from your view. By importing or requiring moment in your code, you essentially create a local variable within your file. To address this issue, simply assign moment to a property in your viewModel:

import * as ko from 'knockout';
import moment from "moment";

class TestViewModel {
    moment: any = moment;
}

ko.applyBindings(new TestViewModel(), document.getElementById('mainbinding'));

For an optimal solution, consider creating a custom binding. You can find inspiration from this example - https://gist.github.com/tommck/6174395

Answer 2

When working with your viewModel, only the "public" properties are accessible from your view. By importing or requiring moment in your code, you essentially create a local variable within your file. To address this issue, simply assign moment to a property in your viewModel:

import * as ko from 'knockout';
import moment from "moment";

class TestViewModel {
    moment: any = moment;
}

ko.applyBindings(new TestViewModel(), document.getElementById('mainbinding'));

For an optimal solution, consider creating a custom binding. You can find inspiration from this example - https://gist.github.com/tommck/6174395

Maximizing module loading efficiency with Knockout and Webpack

Answer №1

Similar questions

Ways to reload a page in Angular using routerLink and ID

A straightforward development and production build to incorporate HTTPS for a static website created with React and Express

I'm having trouble with accessing an object by index in a knockout observablearray. It seems like the binding process is encountering difficulties

Error in ReactJS: TypeError - Trying to convert undefined or null as an object

Typescript fails to recognize that props are passed by react-navigation through withNavigation HOC

Can you explain the significance of <any> when used before a Typescript class constructor parameter?

Exclusive Vue3 Props that cannot be used together

How can I programmatically trigger the optionSelected event in Angular Material's autocomplete?

Changing an Angular template.html into a PDF document within an Angular 2 application can be achieved by utilizing

Guide on accessing js file in an Angular application

My HTML files are not getting bundled by Webpack

What is the retry mechanism for Http Requests in Angular 4?

Unable to modify the Express Request User type, however, I have the ability to incorporate new attributes to Request object

Angular 8 is throwing an error stating that the property 'token' is not recognized on the 'Object' data type

Is there a way to utilize const assertions to retrieve the explicit types from objects nested at various levels?

Challenges encountered while using TypeScript to implement the CSS breakpoint mixin

The type 'ElementClass' is lacking several key properties, specifically context, setState, forceUpdate, props, and refs

React component's state is not being correctly refreshed on key events

What factors does mongo consider when serializing an object?

Encountering Webpack issues following the transition to Next 13