定义:

    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 简单使用的更多相关文章

  1. Knockout简单用法

    Knockout简单用法 在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架 ...

  2. knockout简单实用教程2

    在上一篇文章中简单了介绍了下什么ko(后文中都已ko来代替knockout.js)和一些简单的ko的使用方法下面我将介绍在实际的项目中常用到的几种绑定方式和方法. 在开始之前先拿一个dome来回顾下k ...

  3. knockout简单实用教程3

    在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...

  4. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  5. knockout.js的简介和简单使用

    1.knockout简介knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化knockout有四大重要概念:1)声明式绑定:使用简明移读的语法很容易地将模型(m ...

  6. 【翻译】使用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 ...

  7. knockout.js简单实用教程1

    第一次接触knockout是在一年多之前吧.当时是接手了一个别人的项目,在项目中有用到knockout来进行数据的绑定.也就开始学习起来knockout.在之后的项目中也多次用到了这个.在第一次开始学 ...

  8. Knockout应用开发指南 第八章:简单应用举例(2)

    原文:Knockout应用开发指南 第八章:简单应用举例(2) 5   Control types 这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select ...

  9. Knockout应用开发指南 第八章:简单应用举例(1)

    原文:Knockout应用开发指南 第八章:简单应用举例(1) 本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用Kncokout的快感. 1   Hello world ...

随机推荐

  1. NPOI 导出Excel表报错

    当导出2007格式的时候,打开文件总是报错“发现 xxx中的部分内容有问题.是否让我们尽量尝试恢复?”. 导出的程序: protected void btnValidateInternalData_C ...

  2. python正则非贪婪模式

    上一篇python正则匹配次数大家应该也发现了,除了?其他匹配次数规则都是尽可能多的匹配 那如果只想匹配1次怎么办呢,这就是正则中非贪婪模式的概念了 原理就是利用?与其他匹配次数规则进行组合 单个匹配 ...

  3. FreeRTOS学习笔记4:时间管理

    绝对时间:abs Time相对时间:百分比% time IDLE是空闲任务. RUN_Time_State:port...()初始化一个外设提供时基单元 //具体初始化要自己操作这个定时器的分辨率高于 ...

  4. axios 请求中的Form Data 与 Request Payload的区别

    在vue项目中使用axios发post请求时候,后台返回500. 发现是form Data 和 Request payload的问题. 后台对两者的处理方式不同,导致我们接收不到数据. 解决方案:使用 ...

  5. Linux系统运维工程师入门绝招放送

    运维是干嘛的?安装服务器系统?重装系统再装系统?背锅的? 我就稀里糊涂的,这样报着必死的决心,考下RHCE认证,走上了Linux运维的道路,成为了一名linux运维工程师.有些心得跟大家分享下,避免小 ...

  6. C#中发ref和out

    ref--Reference  引用 out--Output   输出 相同点: 代入参数时,前面必须加上ref  out 关键字 都能在方法内对外部的变量的值进行更改 不同点: ref代入的参数必须 ...

  7. java爬虫出现java.lang.IllegalArgumentException: Illegal character in path at index 31

    url地址中出现了空格,使用trim()函数去除空格就好了

  8. Docker - 解决docker-machine create下载boot2docker.iso时慢的问题

    解决步骤 从https://github.com/boot2docker/boot2docker/releases下载iso到~/.docker/machine/cache/里 docker-mach ...

  9. 连通数[JSOI2010]-洛谷T4306

    咕咕咕 tarjan+拓排应该是正解吧 然而我上去就打了个tarjan和dijkstra (由于我抄题解抄多了,代码能力极差,于是我就gg了) 题解中有大佬直接用dfs过了8个点,再吸口氧就AC了 ( ...

  10. Java 通过身份证获取生日和性别

    /** * 通过身份证号获取生日和性别 * @param identifyNumber * @return */ private String[] getBirthAndSexByIdNo(Strin ...