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属性,如需转载请自行联系原博主。

目录
相关文章
|
4月前
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
97 12
|
1月前
|
设计模式 存储 人工智能
深度解析Unity游戏开发:从零构建可扩展与可维护的游戏架构,让你的游戏项目在模块化设计、脚本对象运用及状态模式处理中焕发新生,实现高效迭代与团队协作的完美平衡之路
【9月更文挑战第1天】游戏开发中的架构设计是项目成功的关键。良好的架构能提升开发效率并确保项目的长期可维护性和可扩展性。在使用Unity引擎时,合理的架构尤为重要。本文探讨了如何在Unity中实现可扩展且易维护的游戏架构,包括模块化设计、使用脚本对象管理数据、应用设计模式(如状态模式)及采用MVC/MVVM架构模式。通过这些方法,可以显著提高开发效率和游戏质量。例如,模块化设计将游戏拆分为独立模块。
95 3
|
2月前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
68 0
|
3月前
|
Web App开发 JavaScript 前端开发
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
|
3月前
|
JSON Go C++
开发与运维C++问题之在iLogtail新架构中在C++主程序中新增插件的概念如何解决
开发与运维C++问题之在iLogtail新架构中在C++主程序中新增插件的概念如何解决
39 1
|
2月前
|
SQL 数据库
拒绝了对对象 ‘GetTips‘ (数据库 ‘vipsoft‘,架构 ‘dbo‘)的 EXECUTE 权限
拒绝了对对象 ‘GetTips‘ (数据库 ‘vipsoft‘,架构 ‘dbo‘)的 EXECUTE 权限
33 0
|
4月前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
4月前
|
前端开发 测试技术 API
探索安卓应用的架构演进:从MVC到MVVM
本篇文章将深入探讨安卓应用开发中的架构演进,特别关注从传统的MVC(Model-View-Controller)到现代流行的MVVM(Model-View-ViewModel)架构的转变。通过对比两种架构的设计理念、实现方式和实际应用案例,解析MVVM在提高代码可维护性和可测试性方面的优势。
55 0
|
16天前
|
安全 应用服务中间件 API
微服务分布式系统架构之zookeeper与dubbo-2
微服务分布式系统架构之zookeeper与dubbo-2
|
16天前
|
负载均衡 Java 应用服务中间件
微服务分布式系统架构之zookeeper与dubbor-1
微服务分布式系统架构之zookeeper与dubbor-1