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

Question

我是打字稿的新手。我一直在尝试使用knockout.mapping，但是，我无法使它工作。

我已经安装了knockout和knockout.mapping的库，以及两个库中的@types，甚至以这种方式也无法工作。

我在laravel项目中使用typescript，我使用laravel mix生成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和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

您可能需要在页面/包/包中包含它。你能检查一下它是否被收录？您引用类型，但这并不意味着生成的页面或包将自动访问映射库。

作为快速诊断，请尝试在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并没有用，但也许是因为我不知道如何使用它。

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