数据方法Knockout学习之与服务器的数据交互

最新推荐文章于 2017-09-26 11:42:17 发布

dyl_love98

最新推荐文章于 2017-09-26 11:42:17 发布

阅读量314

点赞数

文章标签：数据方法

本文链接：https://blog.csdn.net/javablogs/article/details/8877681

版权

查了好多资料，发现还是不全，干脆自己整理吧，至少保证在我的做法正确的，以免误导读者，也是给自己做个记录吧！

到目前为止，经已对MVVM式模如何帮自己洁整的管理针对动态UI的客户端代码，
以及Knockout的可监听、定绑、依附的工作式方有了很好的懂得。
在绝大部分的Web用应中，你需要从服务器获得数据，再将修改后数据回返。
因为Knockout是一个纯客户端库，它能灵巧的与各种服务器端术技(ASP.NET,Rails,PHP...)
和任何构架式模，数据库作合。只要服务器端能发收JSON式格数据(so easy)，我们就能够用使这类术技。

例子景情
google的Tasks应当很多人都用过吧。我们也来试尝一个。

View Code

<!DOCTYPE HTML>
<html>
<head>
    <title>Custom Bindings</title>
    <script src="../JS/jquery-latest.min.js" type="text/javascript"></script>
    <script src="knockout-2.2.0.js" type="text/javascript"></script>
    <style type="text/css">
    body { font-family: Helvetica, Arial }
    input:not([type]), input[type=text], input[type=password], select { background-color: #FFFFCC; border: 1px solid gray; padding: 2px; }
    .codeRunner ul { list-style-type: none; margin: 1em 0; background-color: #cde; padding: 1em; border-radius: 0.5em;  }
    .codeRunner ul li a { color: Gray; font-size: 90%; text-decoration: none }
    .codeRunner ul li a:hover { text-decoration: underline }
    .codeRunner input:not([type]), input[type=text] { width: 30em; }
    .codeRunner input[disabled] { text-decoration: line-through; border-color: Silver; background-color: Silver; }
    .codeRunner textarea { width: 30em; height: 6em; }
    .codeRunner form { margin-top: 1em; margin-bottom: 1em; }
    </style>
</head>
<body class="codeRunner">
    <h3>Goagle Tasks</h3>
    <form data-bind="submit:addTask">
        Add task:<input data-bind="value:newTaskText" placeholder="What needs to be done?" />
        <button type="submit">Add</button>
    </form>
    <ul data-bind="foreach:tasks,visible:tasks().length > 0 ">
        <li>
            <input type="checkbox" data-bind="checked:isDone" />
            <input type="text" data-bind="value:title,disable:isDone" />
            <a href="#" data-bind="click:$parent.removeTask">Delete</a>
        </li>
    </ul>
    You have <b data-bind="text:incompleteTasks().length">&nbsp</b>incomplete task(s)
    <span data-bind="visible:incompleteTasks().length==0">- it's beer time!</span>
    
    <script type="text/javascript">
        //Model
        function Task(data) {
            this.title = ko.observable(data.title);
            this.isDone = ko.observable(data.isDone);
        }
        //ViewModel
        function TaskListViewModel() {
            //Data
            var self = this;
            self.tasks = ko.observableArray([]);
            self.newTaskText = ko.observable();
            self.incompleteTasks = ko.computed(function() {
                return ko.utils.arrayFilter(
                    self.tasks(),
                    function(task) {
                        return !task.isDone();
                    }
                );
            });
            //Operations
            self.addTask = function() {
                self.tasks.push(new Task({ title: this.newTaskText() }));
                self.newTaskText("");
            };
            self.removeTask = function(task) {
                self.tasks.remove(task);
            };
        }

        ko.applyBindings(new TaskListViewModel());
    </script>
</body>
</html>

每日一道理
听，是谁的琴声，如此凄凉，低调的音，缓慢的节奏，仿佛正诉说着什么。音低调得略微有些抖动，听起来似乎心也有些抖动，我感觉到一种压抑的沉闷气息，是否已凝结在这空气中……

先给一个简略的单机版Tasks，add-remove功能都是备完的，看一下代码就差多不道知它是怎么运行的了，很简略。

接下来将会演示如何成变线在版。

从服务器获得数据

发送Ajax求请是从台后获得JSON最简略的方法。
所以此次用jQuery的$.getJSON和$.ajax方法来实现。
获得数据-->将其定绑到ViewModel-->UI主动实现动态更新这就是我们要的终最效果。

在服务器上有一些用来处置Ajax求请并回返JSON式格数据的代码。

<%@ WebHandler Language="C#" Class="KnockHandler" %>

using System;
using System.Web;

public class KnockHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.Write("[{\"title\":\"上午去茶喝\"},{\"title\":\"午下在公司Coding\"},{\"title\":\"晚上约妹纸\"},{\"title\":\"洗洗睡吧\"}]");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

在TaskListViewModel末端添加上接收回返数据的代码，并用它填入tasks数组。

//ViewModel
function TaskListViewModel() {
    //Load data from server
    $.getJSON("KnockHandler.ashx",{type:"tasks"}, function(data) {
        var mappedTasks = $.map(data, function(item) {
            return new Task(item);
        });
        self.tasks(mappedTasks);
    });
}

要注意的是你不能在载加数据后调用ko.applyBindings。

多许新手会犯这类错误：每次从台后获得到数据后都试尝新重定绑他们的UI，
结果那是无效的。没有必要新重定绑，因为只更新既存的ViewModel就充足更新全部UI了。

这段代码利用从台后回返的原始数据数组，通过用使jQuery的$.map方法，将个一每条目的数据生成一个Task实例。
然后将生成的Task象对数组插入tasks数组中。因为tasks是被监听的，所以UI也会随之更新。

手动的还是动态的？
在之前的代码中演示了手动式方来获得并映射数据的式方。如果更加的主动化，可以看一下官方mapping API
它功能包含：
1.动态构建意任可监听数据的象对图表
2.通过定约式方映射或用使明白置配的映射回调
3.即使某个象对图表经已在页面上存在了，当你从数据库获得到最新数据后，仍然可以更新响应的UI.

向服务器回返数据：方法1
通过Ajax求请回返数据是没问题的，但我们还有更简略的方法值得参考。
如果在<form>标签里定绑了一些Model数据，那么你可以简略的直接把form发送到服务器。
这完全是小菜一碟，例如，在View底部添加如下form标签：

<form action="KnockHandler.ashx?type=saveform" method="post">
    <textarea name="tasks" data-bind="value:ko.toJSON(tasks)"></textarea>
    <button type="submit">Save</button>
</form>

这里添加的 <textarea>标签只是为了表现数据发生了什么：当Task内容发生变化时，该 <textarea>定绑的内容也会动态的更新。
所以当点击提交按钮时，台后就会到受这个JSON数据
我们没必要让用户看到这个 <textarea>，所以用一个藏隐的 <input>取代就能够了。

<input type="hidden" name="tasks" data-bind="value:ko.toJSON(tasks)" />

至于在台后如何处置接收到的JSON数据，式方很多很简略，这里就不再赘言了。
这里有一个 ASP.NET本版的例子。

向服务器回返数据：方法2
方法一是通过<form>标签的post式方向服务器发送数据，当然我们也完全可以
发送Ajax求请来替换它。例如，用一个一般的<button>标签取代在方法一中添加的<form>标签

<button data-bind="click:save">Save</button>

然后再在TaskListViewModel中实现save方法

function TaskListViewModel(){
    // .. all the existing code
    
    self.save = function() {
        $.ajax({
                url:"KnockHandler.ashx"
                ,data: {
                    data: ko.toJSON({ tasks: self.tasks })
                    ,type:"saveform"
                }
                ,type:"get"
                ,contentType:"application/json"
                ,success:function(result){
                    alert(result);
                }
            }
        );
    };
}

服务器端内容

View Code

<%@ WebHandler Language="C#" Class="KnockHandler" %>
using System;
using System.Web;

public class KnockHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string type = context.Request.Params["type"];
        switch (type)
        {
            case "tasks":
                getTasks(context); break;
            case "saveform":
                saveForm(context); break;
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    private void getTasks(HttpContext context)
    {
        string result = "[{\"title\":\"上午去茶喝\"}"
            +",{\"title\":\"午下在公司Coding\"}"
            +",{\"title\":\"晚上约妹纸\"}"
            +",{\"title\":\"洗洗睡吧\"}]";
        
        context.Response.Write(result);
    }

    private void saveForm(HttpContext context)
    {
        string result = context.Request.Params["data"].ToString();
        context.Response.Write("Server has received the data:\r" + result);
    }
}

这里只是简略的写了一下而已。实际上如果将Knockout与ASP.NET MVC相结合的话，效果当相不错。

官方的学习教程这就学完了，接下来要做的就剩下各种API的学习啦

文章结束给大家分享下程序员的一些笑话语录：话剧：程序员过沟
　　本剧内容纯属虚构，如有雷同……HEHE……俺也没办法了。
　　话说某市街道改建，某某软件公司门口横七竖八挖了几条大沟。一群程序员（SDK程序员赵某，VB程序员钱某，VC程序员孙某，DELPHI程序员李某）下班从公司里出来，看到门前的几条沟，于是各显神通……门前第一条沟也就半米来宽，SDK程序员赵某二话没说，轻轻一跃跳了过去，看到其它人纷纷把随身携带的公文包（类库）横在沟上踩着过沟，不屑地说，这么小一条沟，犯得着小题大做用那个吗？看我多么轻松多么洒脱多么……多么……（众人皆怒目横视之……）
　　接着第二条沟有点宽度。SDK程序员赵某还是还是一马当先，飞跃而起……不好，还差一点才到……幸好凭着多年的（跳远？编程？）经验，单手抓住沟沿，颤巍巍地爬了上来，嘴里还念念有词“高手就是高手啊，虽然差一点就……不过毕竟……HEHE……跳远是过沟的基础嘛，有基础（SDK）就有一切的说……”（众人作瞠目结舌状……）看到别人跳过去了，可自己又跳不了那么远，只好再想办法了……VB程序员钱某，DELPHI程序员李某打开手提，连上手机，开始上网找可供过沟的控件……VC程序员孙某却不慌不忙，打开公文包，把几块衬板拆了下来，然后三下五除二拼成一个简易木桥……“虽然这几个板子（类）做得不怎么样，不过先把这个项目应付过去，有时间我自己做一个好了……”于是踩着板子过了沟。
　　这时钱某和李某也分别找到了合适的东东。钱某找到的是“钢丝绳.ocx”，安装简单，使用方便，拉出一头，对孙某说“大虾，顺手拉兄弟一把……”，于是把绳子系在沟两边的绿化树木上，踩着钢丝就过了沟。刚刚站稳就四方作揖，“小生这里有礼了”。这时一戴着黄袖圈的老太太跳了出来，抓住钱某，“破坏绿化树木，罚款XXXX元，交钱，交钱,交钱!”（老人家作双枪老太婆怒视伪军状
……钱某被逼无奈，只好边掏钱，边对着后台叫道“导演，我这可是因公牺牲，不给个烈士称号也得报销”，后台一个臭鸡蛋飞出，“叫什么叫，我这个月的粮饷还不知哪里去领呢，都什么时代了，你不下岗都不错了……”）
　　李某看着刚刚好不容易从台湾拖回来的“铝条.ZIP”

dyl_love98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据方法Knockout学习之与服务器的数据交互

查了好多资料，发现还是不全，干脆自己整理吧，至少保证在我的做法正确的，以免误导读者，也是给自己做个记录吧！到目前为止，经已对MVVM式模如何帮自己洁整的管理针对动态UI的客户端代码，以及Knockout的可监听、定绑、依附的工作式方有了很好的懂得。在绝大部分的Web用应中，你需要从服务器获得数据，再将修改后数据回返。因为Knockout是一个纯客户端库，它能灵巧的与各种服务
复制链接

扫一扫