Проблема с Sys.UI.DataView и javascript
-
16-09-2019 - |
Вопрос
Я использую Microsoft 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>
Первый <a> тег используется для запуска скрипта для удаления контакта, в то время как второй использует jQuery cluetip для вызова окна при наведении курсора мыши (подробности здесь пропущены).
Проблема, с которой я сталкиваюсь, заключается в том, что HTML отображается некорректно.То, что генерируется, является:
<div id="contacts">
<a><img src="remove.png" /></a>
<a class="contact" rel="/Contacts/Index/{{ ID }}">Darren Oster</a><br />
</div>
В поле предупреждения указываются данные с действительным идентификатором (Guid) и именем ("Даррен Остер").Имя отображается правильно, но поле ID не отображается в атрибуте 'rel', а оператор 'onclick' полностью удален.
Это ограничение MS Ajax или я что-то делаю неправильно?
Заранее благодарю.
Решение
Если атрибут должен содержать какие-либо выражения {{ }}, это должно быть полное значение.
ДА:foo="{{ 'abc' + ID }}"
НЕТ:foo="abc{{ ID }}"
Что касается того, что onclick не генерируется, вероятно, это так, но какая бы проверка вы ни использовали, она не показывает вам значение, поскольку оно задается прямым набором element.onclick, а не AddAttribute() .
Другие советы
InfinitiesLoop навел меня на правильный путь, так что вот окончательный ответ (на случай, если кто-то еще пойдет по этому пути)...
Во-первых, я использовал более ранний предварительный просмотр MS Ajax 4.0.Теперь я обновился до версии preview 5, и все работает немного по-другому.Вот окончательный 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>
внутри a <select> становится
<option sys:value="{{ Value }}">{{ Text }}</option>