首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >knockout.mapping与TypeScript和RequireJS

knockout.mapping与TypeScript和RequireJS
EN

Stack Overflow用户
提问于 2014-09-25 08:19:56
回答 2查看 3.3K关注 0票数 2

试图将ko.mapping与TypeScript和RequireJS结合起来理解。据我所知,我可以创建一个视图模型,将其绑定到一个视图,并通过视图模型将一个复杂的对象公开给我的视图。我没办法把这事办好。web上的大多数示例都希望展示如何获取web服务响应并直接绑定它。我正在寻找一个更基本的例子--我只想把一个未绑定的对象映射到屏幕上。我当然可以手动完成,但我认为这个工具正是为了这个目的而设计的.

我有两个需要:

  1. 在初始显示上显示一个值-可能为空
  2. 使用按钮更改值。

我一直在使用一些示例代码作为概念的证明,这是我能想到的最基本的版本。这个想法是用一个按钮呈现一个视图。该按钮的文本应该加载"Hello!“,当单击时将更新为”再见.“。

我想我的视图模型需要两个物体..。

  1. 波霍
  2. 绑定对象,实例化为ko.mapping.fromJS({})

我的理解(这可能是错误的)是,映射将接受POJO并在绑定对象中自动创建POJO的可观察版本。视图绑定到绑定对象。在任何时候,例如单击按钮,我都可以增强POJO,并将其重新加载到绑定对象中,我的视图将相应更新。

我的视图模型是连接的,因为我可以设置断点,并看到他们被击中。由于绑定对象不可用,页面加载失败。如果我从ko.mapping更改为标准的可观测值,它的负载就会很好。

当我考虑ko.mapping的时候,我错过了什么?我的方法有缺陷吗?

基本POJO类

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class DefaultModel {
    public myField: string;
}
export = DefaultModel;

视图

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>

视图模型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/// <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配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/// <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);
        });
    });
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-09-25 08:50:32

A)在视图模型代码中,对ko.mapping.fromJS的调用只需要前两个参数。因为它返回绑定模型,所以不需要传递绑定模型。它应该是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.boundModel = ko.mapping.fromJS(this.basicModelInstance, {});

B) viewModel.boundModel不是一个函数,而是一个对象。所以在html中,绑定text: boundModel().myField应该是text: boundModel.myField

C)您误解了绑定的工作方式。一旦您有了绑定模型,就不需要更新"POJO“,然后每次视图模型中的内容发生更改时都重新创建绑定模型。淘汰赛提供的双向数据绑定将使您的视图模型和ui (html)保持同步,因此从那时起您只需要使用视图模型。当您需要使用视图模型中的内容并更新您的"POJO“(仅当您需要更新服务器时)时,您可以使用与ko.mapping.toJS函数相反的ko.mapping.fromJS函数。传入绑定模型,它将返回普通的JS "POJO“对象,删除所有可观察到的对象。

票数 1
EN

Stack Overflow用户

发布于 2014-09-25 16:18:21

我把这个授予了@wired_in,因为它提供了帮助。在这里,我将提供最终解决我的问题的代码的工作版本。

我的理论--如果映射可以获取AJAX调用的结果,并自动将其映射到可观察的位置,为什么任何普通的POJO都不能呢?嗯,可以的!这种基本的能力是解放的。现在,我可以自由地创建模型,而不会用“可观察”来污染它们。模型的行为可以像任何普通的对象,没有特殊的处理。操纵模型以满足需求,然后当需要在视图上表示时,通过ko.mapping.fromJS调用绑定它。

这是最后的解决办法。我会按照我提出的问题的顺序.

基本POJO类:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class DefaultModel {
    public myField: string;
}
export = DefaultModel;

视图:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>

视图模型:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/// <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配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/// <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);
        });
    });
});

结论:

最后,我被困在三件事上.

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

现在我可以根据封面下的数据来控制我的观点何时会改变。无论数据是来自AJAX调用,还是来自第三方系统的内部计算操作,还是来自上传的文件--不管是什么--我现在可以在视图中看到数据。很酷。

最后,问题--“为什么在未绑定的POJO中有数据?为什么不使用绑定对象并将其作为可观察的对象来操作?”--我认为答案是“可移植性”。我想自由地传递一个普通的对象进出代码库,而不需要特别考虑。将对象标记为可观察对象的概念是框架强加的约束--使绑定成为可能的变通方法。要求在任何地方应用“可观察”属性是不可取的。分离关心宝贝!总之,从我的肥皂盒里.

谢谢@wired_in。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26043433

复制
相关文章
如何使用DNS和SQLi从数据库中获取数据样本
泄露数据的方法有许多,但你是否知道可以使用DNS和SQLi从数据库中获取数据样本?本文我将为大家介绍一些利用SQL盲注从DB服务器枚举和泄露数据的技术。
FB客服
2019/03/08
11.5K0
如何使用DNS和SQLi从数据库中获取数据样本
Jquery 使用getJSON 获取json数据
1.先引用jq获取下载到本地 CDN地址:https://code.jquery.com/jquery-latest.js
Alone88
2019/10/22
3.5K0
【笔记php】如何使用PHP从JSON提取数据?
2022年8月26日16点36分 如何使用PHP从JSON提取数据? 不多bb,直接上示例 一 $Json = ' { "type": "fish9.cn", "name": "fish9.cn" }'; $fish = Json_decode($Json,true); echo $fish["type"]; //结果fish9.cn 二 $Json = '{ "type":"fish9.cn", "name":"fish9.cn", "daily":[{
吃猫的鱼Code
2023/02/02
4.9K0
19.JAVA-从文件中解析json、并写入Json文件(详解)
json与xml相比, 对数据的描述性比XML较差,但是数据体积小,传递速度更快.
诺谦
2019/12/19
12.1K0
如何从列表中获取元素
观察URAM的物理管脚,不难发现A/B端口都有相应的地址、使能、读写控制信号。与BRAM不同的是URAM的读写使能信号是同一个管脚RDB_WR_A/B,其为0时执行读操作,为1时执行写操作,这意味着一旦A/B端口独立,同一端口的读写操作就无法同时发生,因此,如果采用上一篇文章中介绍的方法将其配置为两个独立的单端口RAM,其读写行为与常规的单端口RAM是不同的,进一步而言,此时的读写行为类似于NO_Change模式。
Lauren的FPGA
2019/10/30
17.3K0
根据bed文件从fasta文件中获取基因
第一次写博客,分享一个做的提取基因序列的程序,根据bed文件里的位置信息从基因组里提取序列
py3study
2020/02/10
2.7K0
如何从机器学习数据中获取更多收益
对于深度学习而言,合适的数据集以及合适的模型结构显得至关重要。选择错误的数据集或者错误的模型结构可能导致得到一个性能不佳的网络模型,甚至可能得到的是一个不收敛的网络模型。这个问题无法通过分析数据得到很好的解决,只能是通过一次次的制作数据集、搭建模型并进行仿真实验才能发现如何最好地利用数据集以及选取什么样的模型结构。  本文讲解一些有关于数据集的实用知识,通过本文你将了解以下三点:
用户3578099
2019/08/16
8.3K0
python-获取URL中的json数据
数据源为某系统提供的URL,打开是json文件,python代码获取如下: URL替换成自己的即可。 import urllib.request def get_record(url): resp = urllib.request.urlopen(url) ele_json = json.loads(resp.read()) return ele_json if __name__ == '__main__': print(get_record('http://abc.co/
py3study
2020/01/16
5.5K0
PowerBI从Onedrive文件夹中获取多个文件,依然不使用网关
整个过程的PQ底层逻辑很清楚,使用一个示例文件作为函数,然后用这个函数遍历文件夹中的所有文件,最终将结果合并到一张表中:
陈学谦
2020/05/07
6.9K0
JSON数据获取指南!
在互联网时代,数据是金钱的来源。然而,要从海量的网页中提取需要的数据并不容易。本文将带你了解如何使用Node.js编写简易爬虫程序,帮助你轻松获取并处理JSON数据,让你不再为数据发愁。
用户614136809
2023/09/25
3840
在shell程序里如何从文件中获取第n行
有没有一种“规范”的方式来做到这一点?我一直在使用 head -n | tail -1,它可以做到这一点,但我一直想知道是否有一个Bash工具,专门从文件中提取一行(或一段行)。
程序熵
2023/09/25
4620
在shell程序里如何从文件中获取第n行
jsonp获取json数据
这两天做微信端JS接口,当时遇到的第一个问题就是权限验证的参数请求,当你请求access_token等的时候,就会存在跨域问题:然后在网上查了,采用ajax的jsonp进行跨域请求,后来报错了,返回的结果错误。然后认真看了一下文档,发现ajax的jsonp返回的数据是callback(json),卡到这里。最后同时为了安全的考虑,我就将这一部分的权限验证参数在后端做,然后前端请求,这样就避免了跨域,同时将安全考虑进去了。
Rattenking
2021/01/29
2.4K0
php – 通过curl从url获取JSON数据「建议收藏」
我试图通过curl连接从URL获取JSON数据.当我打开链接时:它显示{“version”:“N / A”,“success”:true,“status”:true}. 现在,我希望获得以上内容.
全栈程序员站长
2022/07/11
4K0
mysql 从json字符串中获取指定的key:
SELECT SUBSTR(detail,    LOCATE('"email"',detail)+LENGTH('"email":"'),    LOCATE('",', detail,LOCATE('"email"',detail))-(LOCATE('"email"',detail)+LENGTH('"email":"'))) AS email FROM tb_sync_moka2oa_full_detail where moka_id in ( 62923,    64242,    66971,    67197,    67198,    67304,    74124) and is_delete = 0 order by id desc limit 50  ; 虽然mysql 5.7之后支持 JSON_EXTRACT 了,我测试了下好像不行
凯哥Java
2022/12/16
7.3K0
treeview 如何从多个数据表中获取数据动态生成 [提问]
在 汪洋怡舟的这篇文章中【http://www.cnblogs.com/longren629/archive/2007/03/14/674633.html】只使用了一个数据表,效果如图2
跟着阿笨一起玩NET
2018/09/19
6.5K0
treeview 如何从多个数据表中获取数据动态生成 [提问]
typescript中如何直接引入json文件
这是一个单独的文件, 只是引入一个json文件, 使用typescript编写, 发现require关键字出错
cg错过
2020/11/23
8.9K0
typescript中如何直接引入json文件
从损坏的手机中获取数据
有时候,犯罪分子会故意损坏手机来破坏数据。比如粉碎、射击手机或是直接扔进水里,但取证专家仍然可以找到手机里的证据。
FB客服
2020/02/23
10.2K0
如何使用python把json文件转换为csv文件
这里有一段json格式的文件,存着全球陆地和海洋的每年异常气温(这里只选了一部分):global_temperature.json
孙晨c
2021/03/16
8.2K0
如何使用python把json文件转换为csv文件
点击加载更多

相似问题

如何获取json文件中的一些数据?

117

如何使用getJSON从json文件中获取数据

13

如何使用Observable从文件中获取json数据

129

如何使用angularjs从json文件中获取数据

13

如何使用ajax从json文件中获取数据

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文