• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery模板技术和数据绑定实现代码

jQuery模板技术和数据绑定实现代码

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,模板,数据绑定等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
好消息来了,微软开发出了这样的框架,这是对jQuery的一个扩展,从此以后要在浏览器上动态显示服务器端Web Service返回的数据将变得如同用服务器端控件显示数据一样容易。

这个技术就叫jQuery templates and data linking ,这是微软对jQuery做的一个扩展。这种扩展需要jQuery官方的审核,然后才能被包含在jQuery中。据ScottGu的博客上说,此扩展正在等待审核阶段。但是这些功能却是非常强大而且实用,我就先把它转过来了,先睹为快。

在编写AJAX应用时,经常需要利用JavaScript在页面上显示数据,jQuery模板(jQuery Templates)和数据绑定(Data Linking)提供了一种方便的途径将JavaScript数据显示在HTML页面上,数据可以呈现为各种元素,如普通文本、TextBox、列表等。Data Linking这个单词直译应该作数据链接,但是我觉得数据绑定这个词更加能够反映这种技术的能容,而且符合ASP.NET习惯用法。在Scott Guthrie的博客中也这样说,原来他们也想称这种技术为data binding而不是data linking,但是由于jQuery中已经有binding这个术语了,指的是另外的东西,为了不至于引起混淆,所以就只好另外给它起个名字,叫data linking了。

我下面把这个博客转过来,有时间则翻译一下。

以下全文引用自ScottGu的博客。

 

jQuery Templates and Data Linking (and Microsoft contributing to jQuery)

The jQuery library has a passionate community of developers, and it is now the most widely used JavaScript library on the web today.

Two years ago I announced that Microsoft would begin offering product support for jQuery, and that we'd be including it in new versions of Visual Studio going forward. By default, when you create new ASP.NET Web Forms and ASP.NET MVC projects with VS 2010 you'll find jQuery automatically added to your project.

A few weeks ago during my second keynote at the MIX 2010 conference I announced that Microsoft would also begin contributing to the jQuery project.  During the talk, John Resig -- the creator of the jQuery library and leader of the jQuery developer team – talked a little about our participation and discussed an early prototype of a new client templating API for jQuery.

In this blog post, I'm going to talk a little about how my team is starting to contribute to the jQuery project, and discuss some of the specific features that we are working on such as client-side templating and data linking (data-binding).

Contributing to jQuery

jQuery has a fantastic developer community, and a very open way to propose suggestions and make contributions.  Microsoft is following the same process to contribute to jQuery as any other member of the community.

As an example, when working with the jQuery community to improve support for templating to jQuery my team followed the following steps:

  1. We created a proposal for templating and posted the proposal to the jQuery developer forum (http://forum.jquery.com/topic/jquery-templates-proposal and http://forum.jquery.com/topic/templating-syntax ).
  2. After receiving feedback on the forums, the jQuery team created a prototype for templating and posted the prototype at the Github code repository (http://github.com/jquery/jquery-tmpl ).
  3. We iterated on the prototype, creating a new fork on Github of the templating prototype, to suggest design improvements. Several other members of the community also provided design feedback by forking the templating code.

There has been an amazing amount of participation by the jQuery community in response to the original templating proposal (over 100 posts in the jQuery forum), and the design of the templating proposal has evolved significantly based on community feedback.

The jQuery team is the ultimate determiner on what happens with the templating proposal – they might include it in jQuery core, or make it an official plugin, or reject it entirely.  My team is excited to be able to participate in the open source process, and make suggestions and contributions the same way as any other member of the community.

jQuery Template Support

Client-side templates enable jQuery developers to easily generate and render HTML UI on the client.  Templates support a simple syntax that enables either developers or designers to declaratively specify the HTML they want to generate.  Developers can then programmatically invoke the templates on the client, and pass JavaScript objects to them to make the content rendered completely data driven.  These JavaScript objects can optionally be based on data retrieved from a server.

Because the jQuery templating proposal is still evolving in response to community feedback, the final version might look very different than the version below. This blog post gives you a sense of how you can try out and use templating as it exists today (you can download the prototype by the jQuery core team at http://github.com/jquery/jquery-tmpl or the latest submission from my team at http://github.com/nje/jquery-tmpl). 

jQuery Client Templates

You create client-side jQuery templates by embedding content within a <script type="text/html"> tag.  For example, the HTML below contains a <div> template container, as well as a client-side jQuery “contactTemplate” template (within the <script type="text/html"> element) that can be used to dynamically display a list of contacts:

image

The {{= name }} and {{= phone }} expressions are used within the contact template above to display the names and phone numbers of “contact” objects passed to the template.

We can use the template to display either an array of JavaScript objects or a single object. The JavaScript code below demonstrates how you can render a JavaScript array of “contact” object using the above template. The render() method renders the data into a string and appends the string to the “contactContainer” DIV element:

image

When the page is loaded, the list of contacts is rendered by the template.  All of this template rendering is happening on the client-side within the browser:

image 

Templating Commands and Conditional Display Logic

The current templating proposal supports a small set of template commands - including if, else, and each statements. The number of template commands was deliberately kept small to encourage people to place more complicated logic outside of their templates.

Even this small set of template commands is very useful though. Imagine, for example, that each contact can have zero or more phone numbers. The contacts could be represented by the JavaScript array below:

image

The template below demonstrates how you can use the if and each template commands to conditionally display and loop the phone numbers for each contac

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jQuery实现可拖拽的许愿墙效果【附demo源码下载】
  • jQuery动态修改超链接地址的方法
  • jQuery页面滚动浮动层智能定位实例代码
  • 基于Jquery插件实现跨域异步上传文件功能
  • jQuery实现复选框成对选择及对应取消的方法
  • jQuery中的height innerHeight outerHeight区别示例介绍
  • jQuery bt气泡实现悬停显示及移开隐藏功能的方法
  • jQuery中slice()方法用法实例
  • JQuery 进入页面默认给已赋值的复选框打钩
  • JQUERY实现网页右下角固定位置展开关闭特效的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
    • 使用jQuery Rotare实现微信大转盘抽奖功能
    • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
    • jQuery实现自动与手动切换的滚动新闻特效代码分享
    • JQuery for与each性能比较分析
    • 鼠标拖动实现DIV排序示例代码
    • 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
    • 如何使用jQUery获取选中radio对应的值(一句代码)
    • jquery对象访问是什么及使用方法介绍
    • jquery实现邮箱自动补全功能示例分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有