SpreadJS 支持 Knockout (KO)技术， KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库，允许双向数据绑定，使数据和UI界面进行实时的交互更新。关于KO的详细介绍、教程和文档请参考：http://knockoutjs.com/.

你可以通过以下步骤轻松在 SpreadJS 中应用 Knockout 技术：
1. 添加最新的 jQuery 引用， Wijmo 插件， Knockout .js 文件和 KO 关于 Wijmo 的扩展文件。
2. 创建 ViewModel 和 View：添加 JavaScript 定义数据和 UI 行为。创建标记创建 View 视图，可交互的UI。
3. 绑定 SpreadJS 插件到 ViewModel 和 KO.

添加以下引用到 <head> 标签下:

<!-- jQuery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- Knockout -->

<script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.1.0.js"></script>

<!-- SpreadJS CSS and script -->

<link href="http://cdn.wijmo.com/themes/cobalt/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />

<link href="http://cdn.wijmo.com/spreadjs/gcfilter-ui.css" rel="stylesheet" title="metro-jqueryui" type="text/css" />

<link href="http://cdn.wijmo.com/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />

<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.full.min.js" type="text/javascript"></script>

接下来创建视图和数据模型，在<head> 下 <script> 节点下添加以下代码：

function Pet(name, sales, price) {

    this.name = ko.observable(name);

    this.sales = ko.observable(sales);

    this.price = ko.observable(price);

}



var initialData = [



    new Pet("Well-Travelled Kitten", 352, 75.95),



    new Pet("Speedy Coyote", 89, 190.00),



    new Pet("Furious Lizard", 152, 25.00),



    new Pet("Indifferent Monkey", 1, 99.95),



    new Pet("Brooding Dragon", 0, 6350),



    new Pet("Ingenious Tadpole", 3940, 0.35),



    new Pet("Optimistic Snail", 420, 1.50)];





var PagedGridModel = function (items) {



    this.activeIndex = ko.observable(0);



    this.items = ko.observableArray(items);



    this.activeItem = ko.observable(this.items()[this.activeIndex()]);



    this.addItem = function () {



        this.items.push(new Pet("New item", 0, 100));



    };



};


创建 HTML Input 元素和 SpreadJS 插件，把下面标记添加到 Body 标签下：


<div>



        <div>



            <h3>Knockout List-Detail Binding Sample</h3>



            <p>Name: <input type="text" data-bind="value: activeItem().name" /></p>



            <p>Sales: <input type="value" data-bind="value: activeItem().sales" /></p>



            <p>Price: <input type="value" data-bind="value: activeItem().price" /></p>



            <br />



            <div id="ss" data-bind="dataSource: items()" style="position:relative; width:640px; height:300px; border:1px solid grey"></div>



        </div>



    </div>


现在创建 SpreadJS 实例并且绑定到 ViewModel ，通过 apllyBidings 方法应用 KO：


$("#ss").wijspread({ sheetCount: 1 });



var ss = $("#ss").wijspread("spread");



var vm = new PagedGridModel(initialData);



ko.applyBindings(vm);


除此之外提供数据字段的包装，并且绑定初始化数据：


function name(item, value) {



    if (arguments.length == 2) {



        item["name"](value);



    } else {



        value = item["name"]();



        return value;



    }



}





function sales(item, value) {



    if (arguments.length == 2) {



        item["sales"](value);



    } else {



        value = item["sales"]();



        if (typeof (value) == "string" && value.length > 0) {



            value = parseInt(value);



        }



        return value;



    }



}





function price(item, value) {



    if (arguments.length == 2) {



        item["price"](value);



    } else {



        value = item["price"]();



        if (typeof (value) == "string" && value.length > 0) {



            value = parseFloat(value);



        }



        return value;



    }



}





ko.bindingHandlers.dataSource = {



    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {



        var ss = $("#" + element.id).wijspread("spread");



        ss.getActiveSheet().autoGenerateColumns = false;



        ss.getActiveSheet().setDataSource(valueAccessor());



        var cis = [



            { name: "name", value: name },



            { name: "sales", value: sales },



            { name: "price", formatter: "$#,##0.00", value: price }];



        ss.getActiveSheet().bindColumns(cis);





        var cc = ss.getActiveSheet().getColumnCount();



        for (var i = 0; i < cc; i++)



            ss.getActiveSheet().setColumnWidth(i, 160);



        ss.invalidateLayout();



        ss.repaint();



    },



    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {



        var ss = $("#" + element.id).wijspread("spread");



        ss.repaint();



    }



};


最终效果如下：




Demo 下载：



更多关于 HTML5 Wijmo 特性请参考：http://wijmo.gcpowertools.com.cn/
												


											
SpreadJS 中应用 KnockoutJS 技术的更多相关文章
	

    
								
  1. tp中使用分页技术
		
    1 public function showList() { $m_ld = D ( 'guangxi_ld' ); $page = I ( 'get.p', 1 ); // 在配置中获取分页值 $p ...
    
		
    2. 
						
  2. Web 开发中应用 HTML5 技术的10个实例教程
		
    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
    
		
    3. 
						
  3. 【python游戏编程之旅】第七篇---pygame中的冲突检测技术
		
    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 上一个博客我们一起学习了pygame中的Sprite模块和如何加载动画:http://www.cnblogs ...
    
		
    4. 
						
  4. .net中对象序列化技术浅谈
		
    .net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储 ...
    
		
    5. 
						
  5. Unity教程之再谈Unity中的优化技术
		
    这是从 Unity教程之再谈Unity中的优化技术 这篇文章里提取出来的一部分,这篇文章让我学到了挺多可能我应该知道却还没知道的知识,写的挺好的 优化几何体   这一步主要是为了针对性能瓶颈中的”顶点 ...
    
		
    6. 
						
  6. GPRS  GPRS（General Packet Radio Service）是通用分组无线服务技术的简称，它是GSM移动电话用户可用的一种移动数据业务，属于第二代移动通信中的数据传输技术
		
    GPRS 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . GPRS(General Packet Radio Service)是通用分组无线服务技术的简称,它是GSM移动电话用户可 ...
    
		
    7. 
						
  7. Android中直播视频技术探究之---基础知识大纲介绍
		
    一.前言 最近各种视频直播app到处都是,各种霸屏,当然我们也是需要体验的,关于视频直播的软件这里就不介绍了,在不是技术的人来看,直播是一种潮流,是一种娱乐方式,但是作为一个高技术的,我们除了看看,更 ...
    
		
    8. 
						
  8. Android中Java反射技术的使用示例
		
    import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...
    
		
    9. 
						
  9. 【.Net免费公开课】--授技.Net中的高帅富技术-"工作流"
		
    课程简介 免费公开课主题: .Net中的高帅富技术-“工作流” 公开课开课时间:     10月17日 19:30--21:30 公开课YY频道:       85155393   (重要:公开课QQ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 演化理解 Android 异步加载图片
			
    原文:http://www.cnblogs.com/ghj1976/archive/2011/05/06/2038738.html#3018499 在学习"Android异步加载图像小结&q ...
    
			
    2. 
						
  2. SASS用法指南-转
			
    作者: 阮一峰  日期: 2012年6月19日  原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html 艹,没想到sass 2012年就有了.现在 ...
    
			
    3. 
						
  3. 单线程vs多线程
			
    a.多线程可以说是实现异步的一种方式: b.共同点:多线程和异步操作两者都可以达到避免调用线程阻塞的目的,从而提高软件的可响应性: c.线程消费CPU资源.  异步消费硬件资源: 1.多线程和异步操作 ...
    
			
    4. 
						
  4. Sql Server：不允许 ASSIGNMENT 语句中包含 FOR XML 子句
			
    编写函数的时候遇到“不允许 ASSIGNMENT 语句中包含 FOR XML 子句”错误,开始以为数据库函数里不可以写 FOR XML 子句,仔细看了看总觉得这么写别扭索性改了一种写法就通过了. BE ...
    
			
    5. 
						
  5. 数据库同步工具HKROnline SyncNavigator SQL Server互同步MySQL
			
    需要联系我QQ:786211180 HKROnline SyncNavigator 是一款专业的 SQL Server, MySQL 数据库同步软件.它为您提供一种简单智能的方式完成复杂的数据库数据同 ...
    
			
    6. 
						
  6. UNIX环境高级编程笔记之进程控制
			
    本章重点介绍了进程控制的几个函数:fork.exec族._exit.wait和waitpid等,主要需要掌握的是父进程和子进程之间的运行机制,怎么处理进程的正常和异常终止.以及怎么让进程执行不同的程序 ...
    
			
    7. 
						
  7. RESTful 良好的API设计风格
			
    1.使用名词而不是动词 Resource资源 GET读 POST创建 PUT修改 DELETE /cars 返回 cars集合 创建新的资源 批量更新cars 删除所有cars /cars/711 返 ...
    
			
    8. 
						
  8. Java Struts2读取Excel 2003/2007/2010例子
			
    Java读写Excel的包是Apache POI(项目地址:http://poi.apache.org/),因此需要先获取POI的jar包,本实验使用的是POI 3.9稳定版. Apache POI  ...
    
			
    9. 
						
  9. Powerdesigner逆向工程从sql server数据库生成pdm (转载)
			
    第一步:打开"控制面板"中的"管理工具" 第二步:点击"管理工具"然后双击"数据源(odbc)" 第三步:打开之后,点击 ...
    
			
    10. 
						
  10. 基于jquery的响应式提示框SweetAlert
			
    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...
    
			
    11.