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. 使用ueditor小结
			
    1. 导入 js: ueditor.config.js ueditor.all.js css/images/plugin: themes lang dialog(可选) third-party(可选) ...
    
			
    2. 
						
  2. 分享一个web应用程序池管理工具
			
    因为项目在联调阶段由于各种各样的原因需要重启应用程序池,而调试服务器基本都需要远登操作.同样的情况也会发生在线上,如果公司权限控制得比较严格,每次都要多部门的服务器权限申请的话有点麻烦, 所以抽点时间 ...
    
			
    3. 
						
  3. AngularJS初始化闪烁
			
    可以使用:ng-if和ng-cloak解决,原因见:http://www.cnblogs.com/whitewolf/p/3495822.html
    
			
    4. 
						
  4. notepad++插件
			
    html插件 https://github.com/downloads/davegb3/NppTidy2/Tidy2_0.2.zip
    
			
    5. 
						
  5. Jquery中使用setInterval和setTimeout会提示缺少对象的错误，解决方法如下：
			
    直接在ready中调用其他方法,会提示缺少对象的错误,解决方法如下: 方法1. 应用jQuery的扩展可以解决这个问题. $(document).ready(function(){ $.extend( ...
    
			
    6. 
						
  6. Linux多线程编程（不限Linux）【转】
			
    ——本文一个例子展开,介绍Linux下面线程的操作.多线程的同步和互斥. 前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步 ...
    
			
    7. 
						
  7. iOS开发之应用内检测手机锁屏，解锁状态
			
    iPhone的锁屏监测分为两种方式监听: 1. 程序在前台,这种比较简单.直接使用Darwin层的通知就可以了: #import <notify.h> #define Notificati ...
    
			
    8. 
						
  8. ffmpeg中的sws_scale算法性能测试
			
    经常用到ffmpeg中的sws_scale来进行图像缩放和格式转换,该函数可以使用各种不同算法来对图像进行处理.以前一直很懒,懒得测试和甄 别应该使用哪种算法,最近的工作时间,很多时候需要等待别人.忙 ...
    
			
    9. 
						
  9. Unity3d删除无用的美术资源
			
    这个插件是我在国外网站逛论坛发现的,试用了一下非常好用,是一个轻量级的插件就一个类.开发中尤其是和美术合作的时候,可能你会发现Project视图中有很多没有用到的资源,但是你又不敢删除,因为你不知道那 ...
    
			
    10. 
						
  10. linux硬链接和软链接的区别
			
    1.原理上: 硬链接(hard link):A是B的硬链接(A和B都是文件名),则A的目录项中的inode节点号与B的目录项中的inode节点号相同,即一个inode节点对应两个不同的文件名,两个文件 ...
    
			
    11.