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

2024-01-14 18:08

本文主要是介绍Knockout学习之与服务器的数据交互,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

到目前为止,已经对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">//Modelfunction Task(data) {this.title = ko.observable(data.title);this.isDone = ko.observable(data.isDone);}//ViewModelfunction TaskListViewModel() {//Datavar 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的学习啦

 

 

 

 

 

这篇关于Knockout学习之与服务器的数据交互的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/606043

相关文章

Java+AI驱动实现PDF文件数据提取与解析

《Java+AI驱动实现PDF文件数据提取与解析》本文将和大家分享一套基于AI的体检报告智能评估方案,详细介绍从PDF上传、内容提取到AI分析、数据存储的全流程自动化实现方法,感兴趣的可以了解下... 目录一、核心流程:从上传到评估的完整链路二、第一步:解析 PDF,提取体检报告内容1. 引入依赖2. 封装

MySQL中查询和展示LONGBLOB类型数据的技巧总结

《MySQL中查询和展示LONGBLOB类型数据的技巧总结》在MySQL中LONGBLOB是一种二进制大对象(BLOB)数据类型,用于存储大量的二进制数据,:本文主要介绍MySQL中查询和展示LO... 目录前言1. 查询 LONGBLOB 数据的大小2. 查询并展示 LONGBLOB 数据2.1 转换为十

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I

Unity新手入门学习殿堂级知识详细讲解(图文)

《Unity新手入门学习殿堂级知识详细讲解(图文)》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程

Java整合Protocol Buffers实现高效数据序列化实践

《Java整合ProtocolBuffers实现高效数据序列化实践》ProtocolBuffers是Google开发的一种语言中立、平台中立、可扩展的结构化数据序列化机制,类似于XML但更小、更快... 目录一、Protocol Buffers简介1.1 什么是Protocol Buffers1.2 Pro

Linux查询服务器 IP 地址的命令详解

《Linux查询服务器IP地址的命令详解》在服务器管理和网络运维中,快速准确地获取服务器的IP地址是一项基本但至关重要的技能,下面我们来看看Linux中查询服务器IP的相关命令使用吧... 目录一、hostname 命令:简单高效的 IP 查询工具命令详解实际应用技巧注意事项二、ip 命令:新一代网络配置全

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.

Python开发简易网络服务器的示例详解(新手入门)

《Python开发简易网络服务器的示例详解(新手入门)》网络服务器是互联网基础设施的核心组件,它本质上是一个持续运行的程序,负责监听特定端口,本文将使用Python开发一个简单的网络服务器,感兴趣的小... 目录网络服务器基础概念python内置服务器模块1. HTTP服务器模块2. Socket服务器模块

Linux查询服务器系统版本号的多种方法

《Linux查询服务器系统版本号的多种方法》在Linux系统管理和维护工作中,了解当前操作系统的版本信息是最基础也是最重要的操作之一,系统版本不仅关系到软件兼容性、安全更新策略,还直接影响到故障排查和... 目录一、引言:系统版本查询的重要性二、基础命令解析:cat /etc/Centos-release详

Python实现数据可视化图表生成(适合新手入门)

《Python实现数据可视化图表生成(适合新手入门)》在数据科学和数据分析的新时代,高效、直观的数据可视化工具显得尤为重要,下面:本文主要介绍Python实现数据可视化图表生成的相关资料,文中通过... 目录前言为什么需要数据可视化准备工作基本图表绘制折线图柱状图散点图使用Seaborn创建高级图表箱线图热