ko.mapping ||无法读取未定义的属性 'fromJS'

Question

我是 typescript 的新手。我一直在尝试将 knockout.mapping 与它一起使用，但是，我无法让它工作。

我已经安装了 knockout 和 knockout.mapping 的库，还有这两个库的 @types，即使这样也行不通。

我在 laravel 项目中使用打字稿，我正在使用 laravel 混合生成 javascript 文件。

我得到了下一个片段：

///<reference path="../../../../node_modules/@types/jquery/index.d.ts"/>
///<reference path="../../../../node_modules/@types/knockout/index.d.ts"/>
///<reference path="../../../../node_modules/@types/knockout.mapping/index.d.ts"/>

import * as ko from "knockout";
import * as $ from "jquery";

$(function(){
    //this is only a test to check if ko.mapping exists on the ko object. And no, it doesn't appears.
    console.log("Message from jQuery Done", (ko));
});

class MyModel {
    _data: any;
    constructor(the_data: object)
    {
        let self = this;
        let example_observable = ko.observable(); //This is fine

        ko.mapping.fromJS(the_data, self._data); // This fails with the error -> Cannot read property 'fromJS' of undefined
    }
}

let myModel = new MyModel({"x": "y"});
ko.applyBindings(myModel);

我的 package.json 包括淘汰赛和 knockout.mapping 依赖项。

    "@types/jquery": "^3.3.6",
    "@types/knockout": "^3.4.58",
    "@types/knockout.mapping": "^2.0.33",
    "ajv": "^6.5.2",
    "knockout": "^3.4.2",
    "knockout.mapping": "^2.4.3",

我不明白我做错了什么。

感谢任何帮助。

提前致谢。

Answer 1

看起来您实际上可能没有将 Knockout 映射脚本加载到浏览器中。它不是 Knockout 核心的一部分 - 它是一个单独的库。

你可以从这里获取它： https://www.npmjs.com/package/knockout-mapping

您可能需要将其包含在 page/package/bundle 中。你能检查它是否被包括在内吗？您引用了类型，但这并不意味着生成的页面或包将自动访问映射库。

作为快速诊断，尝试在来自 CDN 的脚本标签中手动引用它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

也只是一个指针 - 您不需要这样做：

let self = this;

TypeScript 更好地处理 "this" 的作用域，因此您可以直接引用 "this"。

Answer 2

这对我有用。也许我使用了一个糟糕的解决方案，但它确实有效。

我的问题是"laravel mix"。

在 webpackconfig 中我必须添加下一个：

mix.webpackConfig({   
    //...
    externals: { // I supossed any "global" libraries goes here.
        'knockout': 'ko'
    }
    //...
});

在我的HTML中还要加上：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

然后，瞧！

我确实尝试了 mix.autoload 但没有用，但可能是因为我不知道如何使用它。

如果这是一个愚蠢的答案，请告诉我。我会取消标记。

ko.mapping ||无法读取未定义的属性 'fromJS'

ko.mapping || Cannot read property 'fromJS' of undefined

knockout-mapping-plugin

knockout.js

typescript

laravel-mix

ko.mapping ||无法读取未定义的 属性 'fromJS'

ko.mapping || Cannot read property 'fromJS' of undefined

knockout-mapping-plugin

knockout.js

typescript

laravel-mix

ko.mapping ||无法读取未定义的属性 'fromJS'