KnockoutJS(1)-数据模型

前言

说到数据模型(ViewModel),就不得不提到MVVM模式,接触过WPF和Silverlight的人应该对这个模式比较熟悉。

不熟悉也没多大关系,因为KnockoutJS的使用相对简单。

MVVMView Models

Model-View-View Model (MVVM)是一种创建用户界面的设计模式。

通过它只要将UI界面分成以下3个部分,就可以使复杂的界面变得简单:

1、Model,用于存储你应用程序数据,这些数据表示你业务领域的对象和数据操作(例如:银行可以进行资金转账),并且独立于任何界面。

当使用KO的时候,通常是使用Ajax向服务器请求数据来读写这个数据模型。

2、View Model,纯粹用于描述数据内容和页面操作的数据模型。例如,如果你想实现一个列表编辑器,你的ViewModel(数据模型)就是项目清单对象和你所暴露出来的添加和删除列表项的方法。

注意:这不是UI本身,它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。

当使用KO时,你的View Model(数据模型)是纯粹的不包含HTML知识的JavaScript对象,保持View Model(数据模型)抽象在使用时可以保持简单,因此你可以更简单的操作管理更复杂的行为。

3、View,代表View Model状态的一个可见、互动的UI界面。

它主要用于显示View Model的数据信息、发送用户命令(例如,当用户点击按钮)以及在View Model发生变化时保持自动更新。

使用KO时,你的View层主要就是简单的将HTML文档声明式的绑定到View Model,将它们关联起来。

另外,你也可以利用模版从View Model获取数据动态生成HTML。

一般使用步骤

1. 使用KO创建一个View Model,仅仅只需要声明一个JavaScript对象,例如:

var myViewModel = {
    personName: ‘Bob‘,
    personAge: 123
};

2. 创建一个简单的视图声明式绑定到这个View Model上,例如,下面的代码显示personName的值:

The name is <span data-bind="text: personName"></span>

3. 激活Knockout  data-bind属性并不是HTML固有对象,但使用它是完全正确的(这是完全遵守HTML5,尽管有验证器指出这是一个无法验证的属性,但在HTML4当中使用是不会造成任何问题的)。但浏览器并不知道它是什么意思,所以你需要激活Knockout来使其生效。

激活Knockout,只需要将下面的代码加到<script>标签中就可以了:

ko.applyBindings(myViewModel);

你可以将这个代码放到文档底部,或者放在顶部包含在DOM处理完成诸如JQuery的$函数方法中。

以上操作完成后,你的View(页面)显示的内容等同于编写以下HTML代码:

The name is <span>Bob</span>

ko.applyBindings使用参数

第一个参数是你想激活KO时用于声明式绑定的View Model对象;

第二个参数(可选),你可以使用第二个参数来设置要使用data-bind属性的HTML元素或容器。例如:

ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘))

它限制了只有ID为someElementId的元素才能激活使用KO功能,当你在一个页面中声明了多个View Model来绑定不同的界面区域时,这样限制是很有好处的。

时间: 2024-10-10 08:37:28

KnockoutJS(1)-数据模型的相关文章

JS组件系列——KnockoutJS用法

前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Knockout去实现一个简单的增删改查,来体验一把神奇的MVVM.关于WebApi的剩余部分,博主一定抽时间补上. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得不感叹作为程序猿也真是苦逼,总有学不完的技术,何时是尽头,除非你转化

[后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

KnockoutJS(2)-监控属性

本节主要涉及到3个内容: 1. 监控属性 Observables (这个用的比较多,但是其本身使用比较简单,唯一需要注意就是,它监控的对象是一个方法,所以取值和设置值的时候容易混淆) 2. 计算属性  Computed Observable (这个在新增计算列,或者对字段属性值的读写进行验证.转换时特别有用) 3. 监控属性数组 Observable Arrays (这个用的较少,一开始不需要太深入,毕竟直接绑定数组进行简单显示的情况不多) 下面分别简单介绍一下各自的用法. 1. 监控属性Obs

SpreadJS 中应用 KnockoutJS 技术

SpreadJS 支持 Knockout (KO)技术, KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库,允许双向数据绑定,使数据和UI界面进行实时的交互更新.关于KO的详细介绍.教程和文档请参考:http://knockoutjs.com/. 你可以通过以下步骤轻松在 SpreadJS 中应用 Knockout 技术: 1. 添加最新的 jQuery 引用, Wijmo 插件, Knockout .js 文件和 KO 关于 Wijmo 的扩展文件. 2. 创建 V

knockoutjs

ko中文文档:http://www.aizhengli.com/knockoutjs Knockout介绍 Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面.任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护. KO重要特性: 优雅的依赖跟踪-任何时候当

knockoutjs 经验总结

http://knockoutjs.com/documentation/introduction.html knockout的模式 MVVM 四大重要概念 声明式绑定UI界面自动刷新依赖跟踪模版 一些特点 纯javascript类库 可添加到web程序最上部 简洁 才25kb 兼容任何主流浏览器 采用行为驱动开发 快捷键的设置方法 settings->keymap jQuery 和 knockout的 长处 1. jQuery 擅长 元素操作 和 事件 2. knockout 擅长  数据模型与

定义你的数据模型

在本课程中,您将定义和测试的应用程序FoodTracker数据模型.一个数据模型表示在APP中的的信息结构. 学习目标 在课程结束时,你将能够: 1.创建数据模型2.写failable初始化一个自定义类3.证明failable和nonfailable的不同,理解他们之间的差异和概念4.通过编写和运行单元测试来测试数据模型 创建一个数据模型 现在你需要创建一个数据模型来存储菜谱场景所需要显示的信息.要做到这一点,我们需要定义个简单的类,里面有name,photo,rating 创建一个新的数据模型

Google Dremel数据模型详解

首先简单介绍一下Dremel是什么,能解决什么问题.第二部分着重讲Dremel的数据模型,即数据结构.第三部分将谈一下在此数据结构上设计的算法. 1 起源 Dremel的数据模型起源于分布式系统的应用环境(Protocol Buffers,一种在Google内广泛使用,现已开源的实现).其数据模型是基于强类型的嵌套记录,抽象语法可以表示成下面公式: 一个例子: 2 嵌套列式存储 2.1 记录结构的无损表示 首先来看一下Dremel的数据模型是如何在列式存储下无损的表示出记录的结构的(lossle

主流存储系统的数据模型

主流存储系统的数据模型是这三类:文件模型.关系模型.键值模型. 文件模型 文件模型很常见,基本每个操作系统的的文件子系统都是文件模型.Linux根目录为/,下面挂/home./usr等目录,目录下面有子目录或文件.Windows是每个分区一个文件系统,下面也是目录树结构. 目前云服务提供商提供的存储服务如Amazon Simple Storeage Service(S3).Aliyun Open Storage Service(OSS)是对象模型,对象模型是文件模型的一个变种,简化了文件模型的特