jQuery UI: Melhor maneira de carregar marcação HTML?

votos
2

Qual é a melhor maneira de carregar marcação HTML para um costume Widget jQuery UI?

Até agora, eu vi elementos simplesmente criadas usando cordas (ou seja $(...).wrap('<div></div>')) o que é bom para algo simples. No entanto, isso faz com que seja extremamente difícil modificar mais tarde para elementos mais complexos.

Este parece ser um problema bastante comum, mas também sei que a biblioteca jQuery UI é novo o suficiente para que não haja uma solução amplamente aceita para isso. Alguma ideia?

Publicado 09/12/2008 em 23:25
fonte usuário
Em outras línguas...                            


4 respostas

votos
6

Algo que é bastante puro fazer é esta:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

Dessa forma, você está criando um elemento, e armazenar a sua referência em uma variável, para uso posterior.

Respondeu 09/12/2008 em 23:49
fonte usuário

votos
2

Se você tem uma grande quantidade de HTML complexos, e não querem lidar com cordas codificadas em seu código JavaScript, você pode colocá-lo em um arquivo HTML separado e utilizar a função de carga Ajax .

É chainable, para que possa carregar o arquivo HTML (a coisa toda, ou um fragmento selecionado), injetá-lo em seu atual DOM, e manter a direita em frente.

Respondeu 21/09/2009 em 23:45
fonte usuário

votos
1

Um monte de vezes para modelos muito complexos eu apenas armazenar os blocos html como strings em objetos JSON para o acesso mais tarde ... por exemplo:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

E depois é só executar alguma substituição daqueles quando as coisas voltar. Dessa forma, a marcação é separado um pouco da lógica para carregar os dados, para trocar modelos etc pode ser um pouco mais rápido.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

De qualquer forma, esta abordagem tem funcionado bem para mim com widgets Ajax e esse tipo de coisa, onde há uma possibilidade de que o design pode mudar radicalmente ao redor.

Respondeu 21/09/2009 em 23:19
fonte usuário

votos
0

Um método popular, eficiente é a saída de toda a sua marcação adicional (o que você pode precisar mais tarde) para o fundo de sua página em tags de script, de modo que a marcação não é processado pelo navegador.

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

Você pode em seguida, pegue a sua marcação usando jQuery ...

var markup = $('#template-example').html();

E analisar essas JS exemplos que eu joguei lá usando um motor de templates, como aquele em Underscore.js (que eu recomendo), ou um dos jQuery em esta resposta: motores de templates jQuery

Diverta-se!

Respondeu 27/01/2013 em 23:46
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more