问题Sys.UI.DataView和javascript

Question

我使用的是微软的Ajax动态填充的联系人列表，给定一个JSON数据包。我的代码如下所示：

function fillContactsFromData(contacts) {
    // this is just for debug to let me know that the data is correct
    if (contacts.length > 0) {
        alert('ID: ' + contacts[0].ID + ', Name: ' + contacts[0].Name);
    }

    $create(Sys.UI.DataView, { data: contacts }, null, null, $get('contacts'));
}

关联的HTML如下：

<div id="contacts" class="sys-template">
    <a onclick="removeContact('{{ ID }}');"><img src="remove.png" /></a>
    <a class="contact" rel="/Contacts/Index/{{ ID }}">{{ Name }}</a><br />
</div>

在第一标记被用来触发一个脚本以除去接触，而第二个使用的jQuery cluetip弹出一个框上悬停（细节跳过这里）。

我遇到的问题是，HTML没有被正确呈现。什么正在生成是：

<div id="contacts">
    <a><img src="remove.png" /></a>
    <a class="contact" rel="/Contacts/Index/{{ ID }}">Darren Oster</a><br />
</div>

在警告框指示与有效ID（一个GUID）和名称（“达伦奥斯特”）的数据。名称被正确呈现，但ID字段未在“相对”属性呈现和的“onClick”语句完全移除。

这是MS阿贾克斯的限制还是我错误地做什么？

预先感谢。

Answer 1

如果一个属性是包含任何{{}}表达式必须是整个值。

是： 富= “{{ 'ABC' + ID}}”

没有： 富= “ABC {{ID}}”

至于不的onclick产生，它可能是，但无论使用的是不显示您的值，因为它被设置用直接组element.onclick的检查，而不是的addAttribute（）。

Answer 2

InfinitiesLoop把我在正确的轨道上，所以这里是最后的答案（如果任何人遵循这条道路）...

首先，我使用MS的Ajax 4.0的早期预览。我现在已经更新到第五个预览版，以及工作的事情略有不同。下面是最终HTML（的JavaScript是不变）：

<div id="contacts" class="sys-template">
    <a sys:onclick="{{ 'removeContact(\'' + ID + '\');' }}"><img src="remove.png" /></a>
    <a class="contact" sys:rel="{{ '/Contacts/Index/' + ID }}">{{ Name }}</a><br />
</div>

另外请注意，预览5需要“SYS：”前缀在具有数据绑定值的任何属性，因此

<option value="{{ Value }}">{{ Text }}</option>

内的<选择>变为

<option sys:value="{{ Value }}">{{ Text }}</option>