Как заполнять загруженный контент до его отображения?

Question

Я нахожусь на index.html, я ajax query.php и получаю результат. Теперь, как мне заполнить block.html, прежде чем загружать его в content, чтобы текст не отображался без информации о цвете и размере?

index.html

<div id="content"><button id="button1" type="button">click</button></div> 

block.html

You selected the color: <div id="color"></div>! 
You chose a size of: <div id="size"></div>! 

query.php

$result = array('color' => 'blue', 'size' => '12'); 
echo json_encode($result); 

Answer 1

У вас есть какие-то данные и у У вас есть HTML, и вам нужно объединить их вместе разумным способом. Вы в основном делаете client-side templating.

Вот один основной подход:

1. $.get HTML, вам нужно, и преобразовать объект JQuery processBlock()
2. $.get данные, необходимые getDataFor($el)
3. обновление # 1 с результатами # 2 renderBlock($el, data)
4. вставить обновленный HTML в DOM addToContent($el)

Код:

$.get("block.html", processBlock); 

// create a documentFragment to fill in later 
function processBlock(html) { 
    var $block = $(html); 
    getDataFor($block); 
} 

// get any needed data by querying for JSON 
function getDataFor($el) { 
    $.getJSON("query.php", function(data) { 
     renderBlock($el, data); 
    }); 
} 

// take the data and the element and 
function renderBlock($el, data) { 
    $el.find("#color").text(data.color); 
    $el.find("#size").text(data.size); 
    addToContent($el); 
} 

function addToContent($el) { 
    $el.appendTo($("#content")); 
} 

В не Jquery земли вы создаете то, что называется DocumentFragment, который позволяет создавать немного DOM вы манипулируете, прежде чем вставить его в страницу.

Simpler версия скрипки: http://jsfiddle.net/9kLzP/