Jquery template and datalink

典

"Jquery template and datalink" is Microsoft's contribution to Jquery

http://infinity88.com/jquery-datalink/demo-contacts.html#

https://github.com/nje/jquery-datalink/

Our team members are using it, ...cool, much better than xsl template

kr2000

看了一下，这个挺实用的

最简单的用法

The link API allows you to very quickly and easily link fields of a form to an object. Any changes to the form fields are automatically pushed onto the object, saving you from writing retrieval code. By default, changes to the object are also automatically pushed back onto the corresponding form field, saving you from writing even more code. Furthermore, converters lets you modify the format or type of the value as it flows between the two sides (for example, formatting a phone number, or parsing a string to a number).

var person = {};
$("form").link(person);
$("#name").val("foo");
alert(person.name); // foo
// ... user changes value ...
alert(person.name); // <user typed value>
$(person).data("name", "bar");
alert($("#name").val()); // bar

想问一下这个$("form").link(person);里的form可以改成body吗？有时候不止一个form

典

原帖由 kr2000 于 2010-12-2 09:29 发表
看了一下，这个挺实用的

最简单的用法

The link API allows you to very quickly and easily link fields of a form to an object. Any changes to the form fields are automatically pushed onto the object, savi ...

when do the link, this way may be better
$(data_object)
       .linkBoth("name", "#name", "val")
       .linkBoth("phone", "#phone", "val");


datalink is very convenient for dropdownbox

Should be able to use any element id to replace "form1"

[ 本帖最后由 典 于 2010-12-2 09:43 编辑 ]

cdfei

挺方便的

cdfei

为什么？

dalaohu

you link fields to the data object.

so when fields value changes it will notify the data object

make perfect sense

典

原帖由 cdfei 于 2010-12-2 09:42 发表
为什么？

sorry, maybe misleading, just a feeling.  I don't have much experience of them, they are quite new stuff,
Hope you guys write more

cdfei

我是问，为什么对dropdownbox特别方便？

dalaohu

he probably mean

A collection can be automatically populate into a dropdownbox by using the .link

dalaohu

the idea is exactly same as how data is bind to MVC's view

good job to MS for applying this to js

典

原帖由 cdfei 于 2010-12-2 09:48 发表
我是问，为什么对dropdownbox特别方便？

without datalink, we need to initiate dropdownbox with existed value,
for example:
document.getelementbyId("dropdown").value="John"
that wont work, more code required to achieve that. (I maybe wrong, not quite sure)

with datalink, we do nothing.

kr2000

我现在正在搞一个form，想试试，结果搞了半天不work:si78

        var purchase = {};
        $("form").link(purchase);
        $("#existing_organisation_abn").val("foo");
        $(purchase).data("existing_organisation_abn", "bar");
        alert (purchase.existing_organisation_abn);
        alert ($("#existing_organisation_abn").val());

第一个alert是undifined
第二个是foo，也不是bar

kr2000

原帖由 典 于 2010-12-2 10:55 发表


without datalink, we need to initiate dropdownbox with existed value,
for example:
document.getelementbyId("dropdown").value="John"
that wont work, more code required to achieve that. (I maybe wr ...

jquey可以直接用val()呀

dalaohu

原帖由 kr2000 于 2010-12-2 11:08 发表
我现在正在搞一个form，想试试，结果搞了半天不work:si78

        var purchase = {};
        $("form").link(purchase);
        $("#existing_organisation_abn").val("foo");
        $(purchase).data("existing_organisation_abn", "b ...

referenced to jQuery.datalink.js?

kr2000

原帖由 dalaohu 于 2010-12-2 11:12 发表


referenced to jQuery.datalink.js?

是呀，要不然会有link() undefined？
什么错都不报

典

var purchase = {
"existing_organisation_abn": "bar"
};

please Try this, after ..._abn, use ":"

kr2000

原帖由 典 于 2010-12-2 11:23 发表
var purchase = {
"existing_organisation_abn": "bar"
};

please Try this, after ..._abn, use ":"

加了这个，第一个alert就是bar了
第二个alert还是foo
感觉没有link

典

My understand is, when you link,
(1) need to link element_id to attribute name
so need to link existing_organisation_abn to #existing_organisation_abn
(2) idealy the link script should be under $().ready

I am sure if you use
$(purchase)
   .linkBoth("existing_organisation_abn", "#existing_organisation_abn", "val")

under $().ready

it will work

[ 本帖最后由 典 于 2010-12-2 10:38 编辑 ]

dalaohu

原帖由 kr2000 于 2010-12-2 11:08 发表
我现在正在搞一个form，想试试，结果搞了半天不work:si78

        var purchase = {};
        $("form").link(purchase);
        $("#existing_organisation_abn").val("foo");
        $(purchase).data("existing_organisation_abn", "b ...

貌似他要 onvaluechange, data object 才有值的。

我这边工作的。
<input type="text" name="age" id="age" onclick="pop()" />

var person = { };
$("form").link(person);

function pop()
{
        alert(person.age);
}

dalaohu

原帖由 典 于 2010-12-2 11:28 发表
My understand is, when you link,
(1) need to link element_id to attribute name
so need to link existing_organisation_abn to #existing_organisation_abn
(2) idealy the link script should be under $().re ...

no you don't need to.

我发现这个牛x的地方在， 你一旦把form.link(dataobject)

form 里所有的element会自动成为 dataobject 的成员。

典

Please get an example from level 18

kr2000

我考，我发现我的jquery版本太老
我的是1.4.2，换成最新的就可以了

奇怪的是典的文件也是1.4.2

乱码

如果它template的语法格式跟mvc其中一个view engine的格式相同，比如他们现在主推的razor，就更好了,前后台都可以统一起来了。

之前好像有个jQuery plugin都可以把linq的语法来query against比较整装的json，也是很牛Ｂ

o2h2o

这个东西有个问题,他的js 貌似把那些 template 语法替换了
但是 如果client 端是个 native 的app, 例如python 啥的,脱离了浏览器的执行环境 ,就是 fetch html,做parse的
解析起来就麻烦了

不知道是好还是不好

阿Ka

http://weblogs.asp.net/dwahlin/a ... uery-templates.aspx

porcorosso

so many dot.net monkeys in oursteps