jQuery 템플릿 기술 및 데이터 바인딩 구현 code_jquery

好消息来了，微软开发出了这样的框架，这是对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

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:

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:

 

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:

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

If a contact has one or more phone numbers then each of the phone numbers is displayed by iterating through the phone numbers with the each template command:

The jQuery team designed the template commands so that they are extensible. If you have a need for a new template command then you can easily add new template commands to the default set of commands.

Support for Client Data-Linking

The ASP.NET team recently submitted another proposal and prototype to the jQuery forums (http://forum.jquery.com/topic/proposal-for-adding-data-linking-to-jquery). This proposal describes a new feature named data linking. Data Linking enables you to link a property of one object to a property of another object - so that when one property changes the other property changes.  Data linking enables you to easily keep your UI and data objects synchronized within a page.

If you are familiar with the concept of data-binding then you will be familiar with data linking (in the proposal, we call the feature data linking because jQuery already includes a bind() method that has nothing to do with data-binding).

Imagine, for example, that you have a page with the following HTML elements:

The following JavaScript code links the two INPUT elements above to the properties of a JavaScript “contact” object that has a “name” and “phone” property:

When you execute this code, the value of the first INPUT element (#name) is set to the value of the contact name property, and the value of the second INPUT element (#phone) is set to the value of the contact phone property. The properties of the contact object and the properties of the INPUT elements are also linked – so that changes to one are also reflected in the other.

Because the contact object is linked to the INPUT element, when you request the page, the values of the contact properties are displayed:

More interesting, the values of the linked INPUT elements will change automatically whenever you update the properties of the contact object they are linked to.

For example, we could programmatically modify the properties of the “contact” object using the jQuery attr() method like below:

Because our two INPUT elements are linked to the “contact” object, the INPUT element values will be updated automatically (without us having to write any code to modify the UI elements):

Note that we updated the contact object above using the jQuery attr() method. In order for data linking to work, you must use jQuery methods to modify the property values.

Two Way Linking

The linkBoth() method enables two-way data linking. The contact object and INPUT elements are linked in both directions. When you modify the value of the INPUT element, the contact object is also updated automatically.

For example, the following code adds a client-side JavaScript click handler to an HTML button element. When you click the button, the property values of the contact object are displayed using an alert() dialog:

The following demonstrates what happens when you change the value of the Name INPUT element and click the Save button. Notice that the name property of the “contact” object that the INPUT element was linked to was updated automatically:

The above example is obviously trivially simple.  Instead of displaying the new values of the contact object with a JavaScript alert, you can imagine instead calling a web-service to save the object to a database. The benefit of data linking is that it enables you to focus on your data and frees you from the mechanics of keeping your UI and data in sync.

Converters

The current data linking proposal also supports a feature called converters. A converter enables you to easily convert the value of a property during data linking.

For example, imagine that you want to represent phone numbers in a standard way with the “contact” object phone property. In particular, you don't want to include special characters such as ()- in the phone number - instead you only want digits and nothing else. In that case, you can wire-up a converter to convert the value of an INPUT element into this format using the code below:

Notice above how a converter function is being passed to the linkFrom() method used to link the phone property of the “contact” object with the value of the phone INPUT element. This convertor function strips any non-numeric characters from the INPUT element before updating the phone property.  Now, if you enter the phone number (206) 555-9999 into the phone input field then the value 2065559999 is assigned to the phone property of the contact object:

You can also use a converter in the opposite direction also. For example, you can apply a standard phone format string when displaying a phone number from a phone property.

Combining Templating and Data Linking

Our goal in submitting these two proposals for templating and data linking is to make it easier to work with data when building websites and applications with jQuery. Templating makes it easier to display a list of database records retrieved from a database through an Ajax call. Data linking makes it easier to keep the data and user interface in sync for update scenarios.

Currently, we are working on an extension of the data linking proposal to support declarative data linking. We want to make it easy to take advantage of data linking when using a template to display data.

For example, imagine that you are using the following template to display an array of product objects:

{{링크 이름}} 및 {{링크 가격}} 표현식에 주목하세요. 이러한 표현식을 사용하면 SPAN 요소와 제품 개체 속성 간의 선언적 데이터 연결이 가능합니다. 현재 jQuery 템플릿 프로토타입은 사용자 정의 템플릿 명령을 사용하여 구문 확장을 지원합니다. 이 경우 "link"라는 사용자 정의 템플릿 명령을 사용하여 기본 템플릿 구문을 확장합니다.

위 템플릿과 데이터 연결을 사용하면 기본 '제품' 데이터가 업데이트될 때마다 SPAN 요소가 자동으로 업데이트된다는 이점이 있습니다.  선언적 데이터 연결을 사용하면 편집 및 삽입 양식을 더 쉽게 만들 수도 있습니다. 예를 들어 다음과 같은 선언적 데이터 연결을 사용하여 제품 편집을 위한 양식을 만들 수 있습니다.

선언적 데이터 연결을 사용하는 템플릿에서 INPUT 요소의 값을 변경할 때마다 기본 JavaScript 데이터 개체가 자동으로 업데이트됩니다. 업데이트된 값을 얻기 위해 HTML 양식을 스크랩하는 코드를 작성할 필요 없이 기본 데이터로 직접 작업할 수 있으므로 클라이언트측 코드가 훨씬 깔끔하고 단순해집니다.

위 시나리오의 작동 코드 예제 다운로드

이 .zip 파일을 다운로드하여 위 시나리오의 작업 코드 예제를 얻을 수 있습니다.  .zip 파일에는 4개의 정적 HTML 페이지가 포함되어 있습니다.

• Listing1_Templating.htm – 기본 템플릿을 보여줍니다.
• Listing2_TemplatingConditionals.htm – if 및 각 템플릿 명령을 사용하여 템플릿 작성을 보여줍니다.
• Listing3_DataLinking.htm – 데이터 연결을 보여줍니다.
• Listing4_Converters.htm - 데이터 연결과 함께 변환기를 사용하는 방법을 보여줍니다.

파일 시스템에 파일 압축을 푼 다음 각 페이지를 실행하여 실제 개념을 확인할 수 있습니다.

요약

오픈 소스 jQuery 프로젝트에 참여할 수 있게 되어 기쁩니다.  우리는 처음 두 가지 제안에 대해 많은 고무적인 피드백을 받았으며 앞으로도 적극적으로 기여할 것입니다.  이러한 기능을 통해 모든 개발자(ASP.NET 개발자 포함)가 훌륭한 Ajax 애플리케이션을 더욱 쉽게 구축할 수 있기를 바랍니다.

도움이 되기를 바랍니다.
jQuery 模板和数据绑定演示代码