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. ViewPager中使用PhotoView时出现pointerIndex out of range异常
			
    问题描述: 当PhotoView 和 ViewPager 组合时 ,用双指进行放大时 是没有问题的,但是用双指进行缩小的时候,程序就会崩掉,并且抛出java.lang.IllegalArgumentE ...
    
			
    2. 
						
  2. iOS开发——项目实战总结&带你看看Objective－C的精髓
			
    带你看看Objective-C的精髓 1:接口与实现 @interface...@end @implementation...@end @class 接口(头文件) 实现文件 向前引用 注:类别通过增 ...
    
			
    3. 
						
  3. （转）新手必看：HighCharts几个基础问答
			
    转自:http://bbs.hcharts.cn/article-21-1.html
    
			
    4. 
						
  4. MPEG2/TS 包结构简述
			
    TS 包由以下3部分组成: 包头: 4字节, 同步,识别,检错和加密用 自适配域:可选 包数据:最大184字节(不存在自适配域) 4字节 184字节 包头 自适配域 包数据 4字节包头结构: 1字节  ...
    
			
    5. 
						
  5. 后台增加一个左侧列表菜单menu菜单的方法
			
    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...
    
			
    6. 
						
  6. mysql日志问题定位实用命令
			
    show engine innodb status查看日志 select @@version;查看版本(不同版本性能优化不同) SELECT * FROM information_schema.inn ...
    
			
    7. 
						
  7. jquery $.proxy使用
			
    在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个.例如: //正常的this使用 $('#myElement').click(function() { //  ...
    
			
    8. 
						
  8. 译：用InnoSetup模块化安装依赖项
			
    译文出处:http://www.codeproject.com/Articles/20868/NET-Framework-Installer-for-InnoSetup 源文件下载:http://fi ...
    
			
    9. 
						
  9. iOS 复选框做法
			
    -(void)checkboxClick:(UIButton *)btn{    btn.selected = !btn.selected;} - (void)viewDidLoad {UIButto ...
    
			
    10. 
						
  10. TFS Build Silverlight项目的两个问题
			
    1.The Silverlight 4 SDK is not installed. 打开对应的Build Definition,Process -> Advanced -> MSBuild ...
    
			
    11.