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. 通过transform属性改变图片的位置大小等信息
			
    对UIImageView的位置大小方向的改变可以通过改变其transform属性值实现. 位置改变: var transform = CGAffineTransformMakeTranslation( ...
    
			
    2. 
						
  2. SQL语句删除所有表
			
    ) )     ) )     ) )     ) ) )  TABLE_NAME  CONSTRAINT_NAME  CONSTRAINT_NAME  TABLE_NAME ) ) )  TABLE ...
    
			
    3. 
						
  3. 同时大量连接导致的DDOS攻击，导致收发器宕机，用户大面积超时掉线
			
    前段时间一个客户改成电信网通自动路由后(当然和这个没有关系,但是客户一般没有分析能力,会多想),用户经常大面积掉线,用户才180多个,在线最多也才120多,十分苦恼,原先帮其维护的技术人员,只是远程诊 ...
    
			
    4. 
						
  4. android sudio 打包资料汇总
			
    .http://blog.csdn.net/fengyuzhengfan/article/details/43876489 混淆2.http://my.oschina.net/fallenpanda/ ...
    
			
    5. 
						
  5. Spring3系列2 -- 松耦合的实现
			
    Spring3系列2 -- 松耦合的实现 一.      环境 spring-framework-3.2.4.RELEASE jdk1.7.0_11 Maven3.0.5 eclipse-jee-ju ...
    
			
    6. 
						
  6. Ubuntu 配置AP总结
			
    1.这个是使用别人写的一个GUI来配置,:http://hi.baidu.com/lexiangtaotao/item/5d4e87f22db132c70cd1c86f 2.使用hostapd配置:h ...
    
			
    7. 
						
  7. SLAM拾萃(3)：siftGPU
			
    前言 本周博客我们给大家介绍一下SiftGPU.由于特征匹配是SLAM中非常耗时间的一步,许多人都想把它的时间降至最短,因此目前ORB成了非常受欢迎的特征.而老牌SIFT,则一直给人一种“很严谨很精确 ...
    
			
    8. 
						
  8. netty ByteBuf分析
			
    1.Heap Buffer(堆缓冲区) 2.Direct Buffer(直接缓冲区) 3.Composite Buffer(复合缓冲区) 4.PooledByteBuf 池缓冲 readerInex  ...
    
			
    9. 
						
  9. c/c++:动态库 静态库 linux/windows 例子 （转）
			
    作者:吴秦出处:http://www.cnblogs.com/skynet/本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名吴秦(包含链接). C++静 ...
    
			
    10. 
						
  10. Session丢失的解决办法小结
			
    最近在做ASP.NET项目时,测试网站老是取不出Session中的值,在网上搜索了一下,找到一些解决方法,记录在这里.最后使用存储在StateServer中的办法解决了问题. SessionState ...
    
			
    11.