定义:

    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. 【网易官方】极客战记(codecombat)攻略-地牢-高举之剑

    关卡连接: https://codecombat.163.com/play/level/the-raised-sword 为了战斗,学会武装你自己. 简介 依照名字攻击每个食人魔.记住,每个食人魔需要 ...

  2. JS高级---案例:贪吃蛇小游戏

    案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...

  3. 【StarUML】用例图

    用例图是在项目初期确认需求的时候,需要明确各个参与者之间的关系以及对应的功能,它可视化地展示了整个系统的功能以及功能之间.功能与参与者之间的关系. 1.元素 1.1 角色(actor) 角色不一定是人 ...

  4. lees入门

    安装 1 下载EasyLess插件 2 新建less文件,输入less语句,保存,就会在同级目录下生成同名的css文件 3 在HTML页面导入 <link rel="styleshee ...

  5. 鬼斧神工:求n维球的体积

    原文地址:http://spaces.ac.cn/archives/3154/ 原文作者:苏剑林 标准思路 简单来说,\(n\)维球体积就是如下\(n\)重积分 \[V_n(r)=\int_{x_1^ ...

  6. 题解【洛谷P5436】【XR-2】缘分

    题目背景 世间万物都置身于缘分编织的大网中.缘分未到,虽历经千劫,却不能相遇.缘分到了,在草原上都能等到一艘船.--<一禅小和尚> 题目描述 一禅希望知道他和师父之间的缘分大小.可是如何才 ...

  7. Python 之路

    Python之路[第一篇]:Python简介和入门 Python之路[第二篇]:Python基础(一) Python之路[第三篇]:Python基础(二) Python之路[第四篇]:模块 Pytho ...

  8. php 移动操作数组函数

    下面的几个主要是移动数组指针和压入弹出数组元素的和个函数. 函数 功能 array_shift 弹出数组中的第一个元素 array_unshift 在数组的开始处压入元素 array_push 向数组 ...

  9. TCL Strings

    append    Append values to variable binary      Insert and extract fields from binary strings regexp ...

  10. Win下PHP5.6版本安装redis扩展

    首先说一下自己的环境啥的,我用的是phpstudy,其实没啥大用,就是看你的php版本啥的 1.运行phpinfo(),查看php的信息,php的位数和扩展信息,和要下载的扩展文件信息有关, 2.下载 ...