Knockout+Webpack - 加载模块

Question

我正在使用带有 TypeScript 视图模型和 WebPack 的 knockoutJs 来捆绑所有内容。

在我开始使用模块和 webpack 之前，我能够编写如下内容：

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

但知道我收到此错误：消息：未定义时刻

如果我在视图模型中使用矩（即：通过将其分配给变量），它会起作用。

viewmodel.ts：

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

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

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

查看（cshtml部分页面）

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

我错过了什么？

Answer 1

您的视图只能访问您的 viewModel 的“公共”属性。 当您在代码中导入/需要时刻时 - 它就像文件中的局部变量。 要解决您的问题，请将 moment 分配给 viewModel 变量：

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

class TestViewModel {
    moment: any = moment;
}

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

但是我建议您创建custom binding。你可以从这里获得灵感 - https://gist.github.com/tommck/6174395