MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性

简介:

对于一个JS对象来说,如果希望将所有属性进行监视,在之前我们需要一个个对属性添加ko.observable方法,而有了Mapping插件后,它可以帮助我们这件事.

在Mapping出现之前

var data={
        serverTime:ko.observable( '2010-01-07'),
        numUsers: ko.observable(3),
        realUsers: ko.observable(3),
}

我们需要对data对象里所有属性添加ko.observable方法,才可以对它进行监视.

Mapping出现之后

假设有这样一个场景,我们在对象里的realUsers需要跟随numUsers进行变化,这时,我们使用Mapping进行对象的KO处理,然后再使用ko.computed方法进行绑定,看一下代码

   var data = {
        serverTime: '2010-01-07',
        numUsers: 3,
        realUsers: 3,
    }
    var M = ko.mapping.fromJS(data);//data对象里所有属性添加ko属性
    M.realUsers = ko.computed(function () {
        return M.numUsers() ? M.numUsers() * 2 : 0;
    });
    ko.applyBindings(M, document.getElementById("model2"));

对应的HTML代码如下

<div id="model2">
    <input type="text" data-bind="value:serverTime" />
    <input type="text" data-bind="value:numUsers,valueUpdate: 'afterkeydown'" />
    <input type="text" data-bind="value:realUsers" />

</div>

通过这个例子,让我们知道如何快速的为JS对象添加KO属性,呵呵.

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性,如需转载请自行联系原博主。

目录
打赏
0
0
0
0
17
分享
相关文章
Kotlin教程笔记 - MVP与MVVM架构设计的对比
Kotlin教程笔记 - MVP与MVVM架构设计的对比
139 4
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
51 2
多维度解析低代码:从技术架构到插件生态
本文深入解析低代码平台,涵盖技术架构、插件生态及应用价值。通过图形化界面和模块化设计,低代码平台降低开发门槛,提升效率,支持企业快速响应市场变化。重点分析开源低代码平台的优势,如透明架构、兼容性与扩展性、可定制化开发等,探讨其在数据处理、功能模块、插件生态等方面的技术特点,以及未来发展趋势。
多维度解析低代码:从技术架构到插件生态
本文深入解析低代码平台,从技术架构到插件生态,探讨其在企业数字化转型中的作用。低代码平台通过图形化界面和模块化设计降低开发门槛,加速应用开发与部署,提高市场响应速度。文章重点分析开源低代码平台的优势,如透明架构、兼容性与扩展性、可定制化开发等,并详细介绍了核心技术架构、数据处理与功能模块、插件生态及数据可视化等方面,展示了低代码平台如何支持企业在数字化转型中实现更高灵活性和创新。
91 1
后端服务架构的微服务化转型
本文旨在探讨后端服务从单体架构向微服务架构转型的过程,分析微服务架构的优势和面临的挑战。文章首先介绍单体架构的局限性,然后详细阐述微服务架构的核心概念及其在现代软件开发中的应用。通过对比两种架构,指出微服务化转型的必要性和实施策略。最后,讨论了微服务架构实施过程中可能遇到的问题及解决方案。
云计算的未来:云原生架构与微服务的革命####
【10月更文挑战第21天】 随着企业数字化转型的加速,云原生技术正迅速成为IT行业的新宠。本文深入探讨了云原生架构的核心理念、关键技术如容器化和微服务的优势,以及如何通过这些技术实现高效、灵活且可扩展的现代应用开发。我们将揭示云原生如何重塑软件开发流程,提升业务敏捷性,并探索其对企业IT架构的深远影响。 ####
93 3
云原生架构下的微服务治理与挑战####
随着云计算技术的飞速发展,云原生架构以其高效、灵活、可扩展的特性成为现代企业IT架构的首选。本文聚焦于云原生环境下的微服务治理问题,探讨其在促进业务敏捷性的同时所面临的挑战及应对策略。通过分析微服务拆分、服务间通信、故障隔离与恢复等关键环节,本文旨在为读者提供一个关于如何在云原生环境中有效实施微服务治理的全面视角,助力企业在数字化转型的道路上稳健前行。 ####
从单体到微服务:如何借助 Spring Cloud 实现架构转型
**Spring Cloud** 是一套基于 Spring 框架的**微服务架构解决方案**,它提供了一系列的工具和组件,帮助开发者快速构建分布式系统,尤其是微服务架构。
357 69
从单体到微服务:如何借助 Spring Cloud 实现架构转型

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等