Problema com Sys.UI.DataView e javascript

Question

Estou usando o Microsoft Ajax para preencher dinamicamente uma lista de contatos, dado um pacote de json. Meu código é o seguinte:

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'));
}

O HTML associado é a seguinte:

<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>

O primeiro tag é usado para acionar um script para remover o contato, enquanto o segundo usa o cluetip jQuery para abrir uma caixa em foco (detalhes ignorado aqui).

O problema que estou tendo é que o HTML não está sendo processado corretamente. O que está sendo gerado é:

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

A caixa de alerta indica dados com ID válida (a Guid) e nome ( "Darren Oster"). O nome está sendo processado corretamente, mas o campo ID não é processado no atributo 'rel', eo 'onclick' declaração é totalmente removido.

Isso é uma limitação do MS Ajax ou estou fazendo algo errado?

Agradecemos antecipadamente.

Answer 1

Se um atributo é conter qualquer {{}} expressões deve ser o valor inteiro.

Sim: foo = "{{ 'abc' + ID}}"

No: foo = "abc {{ID}}"

Quanto onclick não sendo gerado, provavelmente é, mas seja qual for a inspeção que você está usando não mostrar-lhe o valor, já que ela é definida com um conjunto direto de element.onclick, não addAttribute ().

Answer 2

InfinitiesLoop me colocou no caminho certo, então aqui está a resposta final (no caso de alguém segue este caminho) ...

Em primeiro lugar, eu estava usando uma visualização anterior do MS Ajax 4.0. Eu agora atualizado para a pré-visualização 5, e as coisas funcionam de forma ligeiramente diferente. Aqui está o HTML final (o javascript está inalterado):

<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>

Observe também que pré-visualização 5 requer dos sys: 'prefixo em todos os atributos que têm valores ligados a dados, então

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

dentro de um se torna

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

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow

Links Úteis

Tag Sobre nós Contatos Privacidade

Facebook Instagram