SpreadJS 中应用 KnockoutJS 技术
时间：2014-05-01 12:14:43
收藏：0
阅读：573
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/
评论（0）