SpreadJS 中应用 KnockoutJS 技术

标签：style   blog   class   java   tar   javascript   ext   width   color   get   string   

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.

添加以下引用到

标签下:

 

接下来创建视图和数据模型，在

下 .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 标签下：

        

            
Knockout List-Detail Binding Sample

            
Name: 

            
Sales: 

            
Price: 

            

            


        


    

 

现在创建 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 
            ss.getActiveSheet().setColumnWidth(i, 160);
        ss.invalidateLayout();
        ss.repaint();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var ss = $("#" + element.id).wijspread("spread");
        ss.repaint();
    }
};
 
最终效果如下：

Demo 下载：

SpreadJSKO.zip

 
更多关于 HTML5 Wijmo 特性请参考：http://wijmo.gcpowertools.com.cn/
SpreadJS 中应用 KnockoutJS 技术,搜素材,soscw.com
SpreadJS 中应用 KnockoutJS 技术
标签：style   blog   class   java   tar   javascript   ext   width   color   get   string   
原文地址：http://www.cnblogs.com/C1SupportTeam/p/using-spreadjs-with-knockout.html