O que outras pessoas pensam de usar atributos "personalizados" para facilitar as coisas (no jQuery)

Question

Atualmente, estou jQuerifyificando (se houver tal palavra) meu site. Não sou bom em JavaScript, e não é ótimo no jQuery. A orientação do objeto é passada por mim em JS, mas o restante do meu site é o VB.net orientado a objetos. Percebi, de alguma experiência que tive do jQuery há algum tempo, o quão difícil pode ser ao carregar páginas para uma linha específica - você precisa de alguma forma descobrir qual ID, por exemplo, enviar e coisas assim.

Recentemente, tentei usar algo como:

<li class="catalogueItem"><a pName='" & Product.Name & "' pID='" & Product.ID & "'>" & Product.Name & "</a></li>

Ok, então isso não é o mesmo - eu estava adicionando algo assim como um controle literal, mas não tenho o código na tela no momento, então apenas escrevi algo parecido.

De qualquer forma, tentei o seguinte:

$("li.catalogueItem").click(function() {
    $(this).html($(this).find("a").attr("pID"));
});

Isso deve funcionar bem, com base nas minhas descobertas. Portanto, minhas perguntas são as seguintes: a) Existe um problema em usar essa técnica? b) O que outras pessoas pensam dessa técnica? c) Tudo bem usar essa técnica, nas opiniões de outras pessoas, apesar do fato de o HTML não cumprir com o W3C etc? d) Alguém pode me apontar na direção de uma maneira mais eficiente ou mais fácil, ou talvez ainda mais difícil / complicada, mas amplamente aceita, de fazer esse tipo de coisa?

Lembre -se de que um produto pode ter muitos atributos e posso usá -lo no front -end do administrador para reorganizar os produtos através de uma interface de arrastar e soltar.

Muito obrigado antecipadamente.

Cumprimentos,

Richard

Nota bastante longa para Rubens ...

Eu não sei se você já fez algum vb.net antes, mas não consigo encontrar uma maneira de criar uma etiqueta de script do lado do servidor e depois dizer algo como:

ScriptTag.Controls.add(New LiteralControl("$('#" & MyDiv.clientID.toString & "').data('ProductName', '" & Product.Name & "');"))

Eu tentei, tentei e tentei, mas as únicas maneiras pelas quais posso encontrar são armazenar os scripts no Serverside (talvez em uma matriz) e depois substituir o evento de renderização da página (quando todos os scripts serão adicionados à matriz) a Saia em uma etiqueta de script ou, um pouco mais horrível, faça com que a etiqueta da cabeça seja executada no servidor e adicione uma etiqueta de script toda vez que preciso para produzir outra peça de script. De qualquer maneira, a implementação dessas técnicas resultaria em levar muito tempo para implementar esse método ou uma tag de cabeça horrível com muitas tags de script.

Eu acredito que os desenvolvedores devem manter as diretrizes sempre que possível - por isso mantenho tags de script na cabeça onde pertencem.

A maneira como sugeri pode ser feita "na mosca" - e os scripts serão carregados se são necessários ou não (eles são especificados na etiqueta da cabeça na página master).

A maneira como vejo da maneira que sugeri tem muito mais vantagens, pois é muito mais fácil codificar (na minha experiência) e pode ser codificada mais rapidamente.

Uma coisa que me ocorreu ... há algo chamado ScriptManager que eu vi no Visual Studio ... eu me pergunto se isso tem algo a ver com manter scripts em um só lugar ... talvez seja hora de fazer alguns Investigar ... postará aqui se eu pensar em qualquer outra coisa, ou aprender qualquer outra coisa sobre qualquer método (prós e contras e da mesma forma).

Richard

Answer 1

Se você vai usar atributos personalizados, eu diria que use data- atributos, assim:

<li class="catalogueItem"><a data-pName='" & Product.Name & "' data-pID='" & Product.ID & "'>" & Product.Name & "</a></li>

Em html5 data- atributos prefixados são para exatamente Esse objetivo ... mas não causará problemas em um documento HTML4 (embora eles sejam tecnicamente inválidos). Por enquanto, você os acessa assim:

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").attr("data-pID"));
});

No próximo jQuery 1.5, .data() vai Procure -os como um retorno também, assim:

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").data("pID"));
});

Answer 2

Todos os navegadores modernos não reclamarão desse uso de HTML inválido. Dito isto, ainda sempre me incomoda. É muito comum ver o uso do rel atributo para armazenar dados no HTML. Eu também frequentemente abordo o id de algo para o Eu iria atributo: <a id="product-384">My Product</a>

Quando você estiver no campo de JavaScript/JQuery, é melhor usar o método JQuery's Data (). Ver http://docs.jquery.com/data

Answer 3

Como Cory Gagliardi escreveu que é melhor usar jQuery.data (http://docs.jquery.com/data) para armazenar e ler dados em qualquer nó HTML.

Usando jQuery.data O método adicionará algum código extra (consulte o trabalho). A idéia principal é que você possa armazenar o objeto JavaScript em um HTML usando uma chave.

Exemplo:

$('li.catalogueItem item-0').data('item', {id:0, name:'My Item', desc:'...'});

Para o seu código .NET real, você será pressionado a escrever este exemplo anterior para cada item. Usar um loop fará o trabalho.

Answer 4

Como usuario Explica, é e o próximo recurso do jQuery e você deve se manter com isso, pois será um código HTML5 válido também.

Mas eu entendo que você está pedindo experiência pessoal, em vez de justificativa técnica.

Então, na minha experiência, use -os tanto quanto você precisa deles.

O HTML está quebrado desde o primeiro dia, está faltando muito o recurso útil, mas as boas notícias são que você pode alternar a maioria deles sem quebrar a funcionalidade.

Eu tenho essa regra, se você está construindo e aplicação, não um público Site (será usado por um público amplo e desconhecido) e você pode ter um ambiente controlado (leia, pode dizer ao usuário do aplicativo qual navegador eles devem usar), faça o que tiver que fazer para melhorar seu aplicativo, e isso é melhor para o cliente e melhor para vocês Para desenvolver/manter/atualizar.

As especificações sempre mudam e sempre apresentam recursos já em uso;)