knockout 简单使用
定义:
var QcViewModel = function () {
var self = this;
self.name = ko.observable();
self.qty = ko.observable();
}; var RecordviewModel =function() {
var self = this;
self.temperature = ko.observable('');
self.prodname = ko.observable('D成型');
self.typename = ko.observable('L');
self.ftargetqty = ko.observable();
self.prodqty = ko.observable();
self.rate = ko.observable();
self.rateless = ko.observable(); self.Detail1 = ko.observableArray([new QcViewModel()]);
self.Detail2 = ko.observableArray([new QcViewModel()]);
self.Detail3 = ko.observableArray([new QcViewModel()]);
}; var myViewModel = new RecordviewModel();
初始化:
ko.applyBindings(myViewModel);
修改值:
myViewModel.temperature(data.temperature); var mapping = {
'Detail1': {
create: function (options) {
var newItem = new QcViewModel();
newItem.name(options.name);
newItem.qty(options.qty);
return newItem;
}
}, 'Detail2': {
create: function (options) {
var newItem = new QcViewModel();
newItem.name(options.name);
newItem.qty(options.qty);
return newItem;
}
}, 'Detail3': {
create: function (options) {
console.log('Detail3:='+options);
var newItem = new QcViewModel();
newItem.name(options.name);
newItem.qty(options.qty);
return newItem;
}
}
};
ko.mapping.fromJS(Detail1, mapping, myViewModel.Detail1);
ko.mapping.fromJS(Detail2, mapping, myViewModel.Detail2);
ko.mapping.fromJS(Detail3, mapping, myViewModel.Detail3);
绑定:
<span data-bind="text: temperature"></span>
遍历:
<div class="col-sm-6 col-md-6" data-bind="foreach: Detail1()">
<h2> <span style="color:red" data-bind="text: qty">90</span> <span style="color:greenyellow" data-bind="text: name"></span></h2>
</div>
knockout 简单使用的更多相关文章
- Knockout简单用法
Knockout简单用法 在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架 ...
- knockout简单实用教程2
在上一篇文章中简单了介绍了下什么ko(后文中都已ko来代替knockout.js)和一些简单的ko的使用方法下面我将介绍在实际的项目中常用到的几种绑定方式和方法. 在开始之前先拿一个dome来回顾下k ...
- knockout简单实用教程3
在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...
- knockout.js的简介和简单使用
1.knockout简介knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化knockout有四大重要概念:1)声明式绑定:使用简明移读的语法很容易地将模型(m ...
- 【翻译】使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定
原文地址:http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Fo ...
- knockout.js简单实用教程1
第一次接触knockout是在一年多之前吧.当时是接手了一个别人的项目,在项目中有用到knockout来进行数据的绑定.也就开始学习起来knockout.在之后的项目中也多次用到了这个.在第一次开始学 ...
- Knockout应用开发指南 第八章:简单应用举例(2)
原文:Knockout应用开发指南 第八章:简单应用举例(2) 5 Control types 这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select ...
- Knockout应用开发指南 第八章:简单应用举例(1)
原文:Knockout应用开发指南 第八章:简单应用举例(1) 本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用Kncokout的快感. 1 Hello world ...
随机推荐
- 安装mongo以及相关扩展
背景:看到了一个nodejs的对mongo操作的课程,于是想学一下. * 1.于是打算先在自己的vps上安装一个mongodb:[ https://docs.mongodb.org/manual/tu ...
- Vue 高德地图 路径规划 画点
CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...
- Educational Codeforces Round 80 (Rated for Div. 2)E(树状数组,模拟,思维)
#define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ],mx[],a[],pos[],sum ...
- 在一个C程序中,main()函数可以放在哪?
C语言规定,在一个C程序中,main()函数的位置(). A.必须在系统调用的库函数之后 B.必须在程序的开始 C.必须在程序的最后 D.可以在任意位置 答案:D [解析] 每个C程序有且只有一个主函 ...
- Django框架之图书管理系统(二)
该篇文章介绍多对多的关系介绍 一.数据库设计 一个作者对应多个书籍 一个书籍对应多个作者 总结也就是多对多之间的关系 通过模型类创建多对多之间的关系表的时候,Django框架通过ORM创建三个表,分别 ...
- php中的elseif和else if
以前的时候还没注意到,知道进入公司,看的代码多了点,时常看到elseif的分支,而我自己时常用的是else if,于是就注意到,他们既然都可以用,那么他们的却别在哪儿呢? 通过查询,原来,确实有点小小 ...
- Raid5(五块磁盘,三块做raid,两块做备份)
1.在虚拟中再添加五块磁盘. 2.使用mdadm命令创建raid5,名称为“/dev/md5”. -C代表创建操作,-v显示创建过程,-a yes检查RAID名称,-n是用到的硬盘个数,-l是定义R ...
- cmake使用的一些补充
一般使用cmake生成vs项目的时候,要么生成32位的要么生成64位的. 怎样将32位和64位在一个工程中打开呢,联系我们自己建立的工程都是32位和64位在一起的,就动手开始了. 实验对象是openc ...
- vs2013编译soui并创建一个项目
1.soui.10.sln改为soui.13.sln 2.用nodepad++打开soui.13.sln,作如下修改 注:第一行我是改为13.00,编译后似乎自己变为12.00了 编译结果: 注:这是 ...
- SpringCloud项目实战
在工作业余时间,自学了SpringCloud的基本组件:Eureka.Ribbo.Feign.Zuul.Config.Bus,是时候操练一下自己所学的这些知识了,记录一下自己的学习过程. 一.目录结构 ...