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

Posted 2023-03-27

【中文标题】ko.mapping ||无法读取未定义的属性“fromJS”

【英文标题】：ko.mapping || Cannot read property 'fromJS' of undefined

【发布时间】：2019-02-07 12:06:03

【问题描述】：

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

我已经安装了knockout和knockout.mapping的库，以及这两个库中的@types，即使这样也不能工作。

我在 laravel 项目中使用 typescript，我正在使用 laravel mix 来生成 javascript 文件。

我得到了下一个sn-p：

///<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",

我不明白我做错了什么。

感谢您的帮助。

提前致谢。

【参考方案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”。

【讨论】：

感谢您的指点。我检查了你的建议，但我仍然遇到问题。有什么奇怪的。如果我在带有脚本标记的主 html 中包含敲除，则可以读取敲除.mapping。即使我打印 ko 对象，ko.mapping 也在那里，但是当我在打字稿文件中进行相同的打印时，ko.mapping 不存在。就像有两个不同的对象。可以是 laravel mix 的东西吗？ T.T

【参考方案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 并没有成功，但可能是因为我不知道如何使用它。

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