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

Question

Qual é a melhor maneira de carregar HTML markup para um costume jQuery UI widget?

elementos Até agora, eu vi simplesmente criadas usando cordas (ou seja $(...).wrap('<div></div>')) 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 idéia?

Answer 1

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.

Answer 2

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

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

Answer 3

Um monte de vezes para modelos muito complexos i só vai armazenar os blocos html como strings em objetos JSON para posterior acesso ... 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.

Answer 4

Um popular, método 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 então pegar sua marcação usando jQuery ...

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

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

Divirta-se!