javascript - 使用 TypeScript 和 RequireJS 的 knockout.mapping-6ren

javascript - 使用 TypeScript 和 RequireJS 的 knockout.mapping

转载作者：搜寻专家更新时间：2023-10-30 21:31:22

尝试结合 TypeScript 和 RequireJS 来理解 ko.mapping。据我了解，我可以创建一个 View 模型，将其绑定(bind)到 View 并通过 View 模型向我的 View 公开一个复杂的对象。我没有运气让这个工作。 Web 上的大多数示例都想展示如何获取 Web 服务响应并直接绑定(bind)它。我正在寻找一个比这更基本的例子——我只想将一个未绑定(bind)的对象映射到屏幕上。我当然可以手动完成，但我认为该工具正是为此目的而设计的...

我有两个需求:

在初始显示时显示一个值 - 可能为空白
使用按钮更改值。

我一直在玩一些示例代码作为概念证明，这是我能想到的最基本的版本。这个想法是用一个按钮来呈现一个 View 。按钮的文本应加载“Hello World!”，并在单击时更新为“再见月亮...”。

我认为我的 View 模型需要两个对象...

POJO
绑定(bind)对象，实例化为 ko.mapping.fromJS({})

我的理解(这可能是错误的)是映射将接受 POJO 并自动在绑定(bind)对象中创建 POJO 的可观察版本。 View 绑定(bind)到绑定(bind)对象。在任何时候，例如单击一个按钮，我都可以扩充我的 POJO，并重新加载到绑定(bind)对象中，我的 View 将相应地更新。

我的 View 模型已连接，因为我可以设置断点并观察它们被击中。页面加载失败，因为绑定(bind)的对象不可用。如果我从 ko.mapping 更改为标准 observables，它加载正常。

考虑 ko.mapping 时我错过了什么？我的方法完全有缺陷吗？

基本 POJO 类

class DefaultModel {
    public myField: string;
}
export = DefaultModel;

查看

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <script data-main="Application/require-config" src="Scripts/require.js"></script>
    </head>
    <body>
        <h1>TypeScript HTML App</h1>
        <button id="myMethodTest" data-bind="text: boundModel().myField, click: function () { myButton_Click() }" ></button>
    </body>
</html>

查看模型

/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />
/// <reference path="../Scripts/typings/knockout.mapping/knockout.mapping.d.ts" />

import DefaultModel = require("Models/DefaultModel");
import ko = require("knockout");

class DefaultViewModel {
    public basicModelInstance: DefaultModel;
    public boundModel: any;

    constructor() {
        // INSTANTIATE THE BOUND MODEL TO BE A BLANK KO MAPPED AWARE OBJECT
        this.boundModel = ko.mapping.fromJS({});

        // SETUP A BASIC INSTANCE OF A POJO
        this.basicModelInstance = new DefaultModel;
        this.basicModelInstance.myField = "Hello World!";

        // LOAD THE POPULATED POJO INTO THE BOUND OBVSERVABLE OBJECT
        this.boundModel = ko.mapping.fromJS(this.basicModelInstance, {}, this.boundModel);
    }

    myButton_Click() {
        // UPDATE THE POJO
        this.basicModelInstance.myField = "Goodbye Moon...";

        // RELOAD THE POJO INTO THE BOUND OBJECT
        this.boundModel = ko.mapping.fromJS(this.basicModelInstance, {}, this.boundModel);
    }
}
export = DefaultViewModel;

RequireJS 配置

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

require.config({
    baseUrl: "",
    paths: {
        "jQuery": "Scripts/jquery-2.1.1",
        "knockout": "Scripts/knockout-3.2.0.debug",
        "utilities": "Application/utilities",
        "ViewModelMapper": "Application/ViewModelMapper",
        "komapping": "Scripts/knockout.mapping-latest.debug"


    },

    shim: {
        "jQuery": {
            exports: "$"
        },
        komapping: {
            deps: ['knockout'],
            exports: 'komapping'
        }
    },
});

require(["jQuery"], function ($) {
    $(document).ready(function () {
        // alert('dom ready');

        require(["utilities", "knockout", "ViewModelMapper", "komapping"], (utilities, knockout, viewModelMapper, komapping) => {
            utilities.defineExtensionMethods($);
            knockout.mapping = komapping;

            var url = window.location;
            var location = utilities.getLocation(url);
            var urlPath = location.pathname;
            var urlPathWithoutExtension = urlPath.replace(".html", "");

            var viewModel = viewModelMapper.getViewModel(urlPathWithoutExtension);
            knockout.applyBindings(viewModel);
        });
    });
});

最佳答案

我将此奖励给@wired_in 提供的帮助。在这里，我将提供最终解决我的问题的代码的工作版本。

我的理论 - 如果映射可以获取 AJAX 调用的结果并自动神奇地将其映射到可观察对象，为什么普通的 POJO 不能？好吧，它可以!这种基本能力正在解放。现在我可以自由地创建模型，而不会用“可观察的”污染它们。这些模型可以像任何没有特殊处理的普通对象一样运行。根据需要操纵模型，然后在需要在 View 上表示时，通过 ko.mapping.fromJS 调用将其绑定(bind)。

这是最终的解决方案。我将按照提出原始问题的相同顺序提出它...

基本 POJO 类:

class DefaultModel {
    public myField: string;
}
export = DefaultModel;

查看:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <script data-main="Application/require-config" src="Scripts/require.js"></script>
    </head>
    <body>
        <h1>TypeScript HTML App</h1>
        <button id="myMethodTest" data-bind="text: boundModel.myField, click: function () { myButton_Click() }" ></button>
    </body>
</html>

查看模型:

/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />
/// <reference path="../Scripts/typings/knockout.mapping/knockout.mapping.d.ts" />

import DefaultModel = require("Models/DefaultModel");
import ko = require("knockout");


class DefaultViewModel {
    public basicModelInstance: DefaultModel;
    public boundModel: KnockoutObservable<DefaultModel>;

    constructor() {
        // SETUP A BASIC INSTANCE OF A POJO
        this.basicModelInstance = new DefaultModel;
        this.basicModelInstance.myField = "Hello World!";

        // LOAD THE POPULATED POJO INTO THE BOUND OBVSERVABLE OBJECT
        this.boundModel = ko.mapping.fromJS(this.basicModelInstance);
    }

    myButton_Click() {
        // UPDATE THE POJO
        this.basicModelInstance.myField = "Goodbye Moon...";

        // RELOAD THE POJO INTO THE BOUND OBJECT
        this.boundModel = ko.mapping.fromJS(this.basicModelInstance, this.boundModel);
    }
}
export = DefaultViewModel;

RequireJS 配置:

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

require.config({
    baseUrl: "",
    paths: {
        "jQuery": "Scripts/jquery-2.1.1",
        "knockout": "Scripts/knockout-3.2.0.debug",
        "utilities": "Application/utilities",
        "ViewModelMapper": "Application/ViewModelMapper",
        "komapping": "Scripts/knockout.mapping-latest.debug"


    },

    shim: {
        "jQuery": {
            exports: "$"
        },
        komapping: {
            deps: ['knockout'],
            exports: 'komapping'
        }
    },
});

require(["jQuery"], function ($) {
    $(document).ready(function () {
        // alert('dom ready');

        require(["utilities", "knockout", "ViewModelMapper", "komapping"], (utilities, knockout, viewModelMapper, komapping) => {
            utilities.defineExtensionMethods($);
            knockout.mapping = komapping;

            var url = window.location;
            var location = utilities.getLocation(url);
            var urlPath = location.pathname;
            var urlPathWithoutExtension = urlPath.replace(".html", "");

            var viewModel = viewModelMapper.getViewModel(urlPathWithoutExtension);
            knockout.applyBindings(viewModel);
        });
    });
});

结论:

最后，我卡在了 3 件事上......

我的 View 错误地引用了 View 中的绑定(bind)对象模型。感谢@wired_in 在这方面的帮助
在构造函数中，我传递了太多参数。谢谢@wired_in 指出了这一点。的文档KnockoutJS.mapping 在这方面不清楚。我认为使用 1vs. 3 参数在这里是可选的。
在方法 myButton_Click 中，我需要传递对现有的，已经绑定(bind)的对象(A.K.A.，viewmodel inside a View 模型)。这是允许更新现有的关键绑定(bind)模型。

现在我可以根据幕后操作的数据来控制我的 View 何时更改。无论数据是来自 AJAX 调用，还是来自第三方系统的内部计算操作，来自上传的文件 - 不管怎样 - 我现在都可以在 View 中看到数据。很酷。

最后，问题 - “为什么在未绑定(bind)的 POJO 中有数据？为什么不直接使用绑定(bind)的对象并将其作为可观察对象进行操作？” - 我认为答案是“便携性”。我想要在没有特殊考虑的情况下自由地将普通对象传入和传出代码库。这种将对象标记为可观察的概念是框架强加的约束——一种使绑定(bind)成为可能的解决方法。要求在任何地方都应用“可观察”属性是不可取的。关注点分离宝贝!无论如何，现在离开我的肥皂盒......

感谢@wired_in。

关于javascript - 使用 TypeScript 和 RequireJS 的 knockout.mapping，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26043433/

文章推荐： javascript - 将 JSON 对象映射到 TypeScript 对象

文章推荐： java - 我怎样才能用计算机程序解决 Log Pile 木制拼图？

文章推荐： Visual Studio 2013 update 3 中并排的 typescript/jscript

requirejs - 验证码 + RequireJS
如何使用 requirejs 导入 recaptcha。我已经尝试了几件事，但没有任何效果。我需要这样做，以便能够在加载后使用 reCaptcha 的渲染方法自行渲染它。 require.confi
requirejs - 依赖关系未定义 - RequireJS
我正在尝试将 OpenLayers 库与 RequireJS 一起使用。问题是，OpenLayers 一直处于“未定义”状态，即使它被列为我的模块的唯一依赖项: define(['OpenLayer
requirejs - 使用 Gulp 构建 requireJS 项目 - gulp-requirejs
我正在尝试使用 gulp-requirejs构建一个演示项目。我希望结果是一个包含所有 js 依赖项和模板的单个文件。这是我的 gulpfile.js var gulp = require('gulp
requirejs - 如何从浏览器控制台访问 RequireJS 模块？
没有 Require.js 就可以在浏览器控制台中调用全局对象，例如 app app.movies 当我将代码包装在 RequireJS 模块中时，如何在浏览器控制台中访问模块中的数据？我会发现这有助
requirejs - 如何在 requirejs 中重新定义模块？
这个问题有 3 个部分。我有两个模块 a 和 b。如何在最初需要 b 后重新定义它？如果 a 依赖于 b，我该如何更新 a 以使用新的 b？如何找到所有依赖于 b 的模块并更新它们？例如；
requirejs - 使用 RequireJS 的主干关系子模型
我正在尝试找到一种将 Backbone-relational 子模型与 RequireJS 一起使用的方法，其中子模型与 super 模型位于不同的文件中。例如: // app.js define(
requirejs - 使用 requirejs 优化时不要复制源文件
使用 require.js (r.js) 优化 js 代码时，将所有 js 源代码复制到目标目录(dir 属性)。有没有办法(一些配置)来防止 requirejs 复制源文件？最佳答案如果添加
requirejs - phantomjs 和 requirejs
main.js 文件中的代码如下: phantom.injectJs("libs/require-1.0.7.js"); require.config( {
requirejs - 使用 RequireJS 配置文件作为构建文件？
我在 require-config.js 中配置了一些路径，如下所示: var require = { baseUrl: '/javascript', paths: {
requirejs - 在 RequireJS 中返回一个模块
我正在重构一个大型 javascript 代码库以使用 RequireJS。不幸的是，我正在处理的许多文件都不是面向对象的，并且在不进行重大修改的情况下无法返回对象。是否有更有效的方法让“依赖”模块访
requirejs - 使用 RequireJs 按特定顺序加载文件
我是 RequireJS 的新手，我对加载顺序感到困惑。我有一个全局项目配置，需要在位于 js/app/* 的模块之前加载。这是我的结构: index.html config.js js/
requirejs - 如何包装使用 RequireJS 加载的外部库？
我已经使用 requireJS 设置了一个 Angular 应用程序。在部署之前，我将所有内容捆绑到一个唯一的文件中。通常，外部库没有 requireJS“定义”包装器。例如Angular Para
requirejs - 有没有更简洁的方法在 RequireJS 中包含依赖项
假设我有一个如下所示的模块: define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../
requirejs - 告诉 RequireJS 不要缩小文件
如何使用 grunt-contrib-requirejs配置或什至r.js Config不缩小特定文件。我可以使用optimize: 'none'选项禁用所有文件的缩小。但我不知道如何对单个文件禁用
requirejs - 在运行时添加 RequireJS 配置的路径
好吧，我已经知道你应该像这样使用 RequireJS 配置路径 require.config({ paths: { name: 'value' } }); 并这样调用它。 requir
requirejs - 使用 requirejs 是否可以在不尝试加载的情况下检查模块是否已定义？
我希望能够有选择地定义一个模块，然后在我的代码中使用或不使用它。我正在考虑的特殊情况是在调试/测试环境中加载模拟/ stub 模块，但不是在我上线时加载。这是示例: 在 html 文件中，可以选择加载
requirejs - Gruntjs 间歇性地停止在 requirejs
我为构建过程创建了一个任务，其中 requirejs 作为它的子任务之一，并且在 requirejs 之后几乎没有其他任务。该任务在运行 requirejs 后停止，即使使用详细信息也不会抛出错误。任
requirejs - RequireJS 中的局部/全局变量
我想创建一个可以从我的 RequireJS 项目中的任何模块访问的变量。例如，在初始化时我想设置: this.myVar = 123; 并且能够在我的 RequireJS 项目内部(但不是外部)的任
requirejs - 从 requirejs 映射调用文本插件
我正在使用 TypeScript、Backbone 和 Mustache 编写网络应用程序。我想使用 Requirejs 进行依赖加载。我还在使用 TypeScript 的 Web Essentia
requirejs - Jasmine、Grunt、RequireJS 在测试输出上停滞
我正在尝试创建一个节点样板，并尝试创建一个任务来运行 Jasmine 测试。我的 Gruntfile.js 中有以下配置: jasmine: { src : ['static/test/spec/

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 TypeScript 和 RequireJS 的 knockout.mapping