定义:

    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. AS报错:Class kotlin.reflect.jvm.internal.FunctionCaller$FieldSetter can not access a member of class com.android.build.gradle.tasks.ManifestProcessorTask with modifiers "private"

    删除所有.gradle文件夹 失效缓存/重新启动

  2. bugku 隐写2

    首先打开链接发现是一张图片 然后分析一下图片 发现这个图片实际是一个压缩包 然后更改一下后缀名 改成zip 然后解压之后会发现另一个压缩包和一张图片压缩包需要密码然后这个图片是一个提示 然后分析 (我 ...

  3. 第一struts2程序

    今天学习了第一个struts2程序 第一步建立一个java web程序 第二步 加入jar包 第三步 添加两个jsp文件 login.jsp和result.jsp文件 login.jsp 在body部 ...

  4. Docker - 容器的 连接 与 退出

    概述 连接容器, 退出容器 命令 run exec attach 退出 选项 -i -t -d 1. docker run 概述 docker run 通常用来创建新容器 docker run 的 三 ...

  5. jmeter实现SMTP邮件协议压测

    实现目的 通过jmeter的SMTP取样器,调用SMTP协议,批量进行邮件的发送,已达到压测的目的. 脚本实现 User Defined Variables定义用户变量 编辑SMTP Sampler取 ...

  6. 题解 P1283 【平板涂色】

    P1283 平板涂色 数据范围也太小了qwq..适合本萌新暴搜 小小的剪枝: 1.用pre预处理出每块矩形上方的矩形,pre[i][0]记录数目(如果数据范围再开大一点,直接1~n枚举判断可能超时qw ...

  7. 流式计算(三)-Flink Stream 篇一

    原创文章,谢绝任何形式转载,否则追究法律责任! ​流的世界,有点乱,群雄逐鹿,流实在太多,看完这个马上又冒出一个,也不知哪个才是真正的牛,据说Flink是位重量级选手,能流计算,还能批处理, 和其他伙 ...

  8. Java生鲜电商平台-生鲜电商高并发下的接口幂等性实现与代码讲解

    Java生鲜电商平台-生鲜电商高并发下的接口幂等性实现与代码讲解 说明:Java生鲜电商平台-生鲜电商高并发下的接口幂等性实现与代码讲解,实际系统中有很多操作,是不管做多少次,都应该产生一样的效果或返 ...

  9. iOS-image图片旋转方向

    https://blog.csdn.net/qq_36557133/article/details/85760469 最近在做项目的时候发现资源包内的图片的方向不对,但也不想让UI切一个新图,所以需要 ...

  10. eclipse配置class注释模板

    /** * Copyright (c) ${year}, All Rights Reserved. * */ ${filecomment} ${package_declaration} ${typec ...