Question

I can’t make out what these 2 lines mean:

var template = $("#" + model + " #grid #template").clone();
var templateHtml = $("#templatebody", template).html();

I can’t understand the selectors here.I know what clone() and html() do

Answer 1

$("#" + model + " #grid #template")

This is looking for an element with the id of template inside an element id grid, inside and element with the id which is set in the model variable.

For example, if model was the string: ‘container’:

<div id="container">
    <div id="grid">
        <div id="template"></div> <!-- this div would be selected -->
    </div>
</div>

---

$("#templatebody", template)

This is a ‘context’ selector; it is looking for the #templatebody element inside the element which is contained in the template variable. Note that a context selector is irrelevant in this case as there should only ever be one element in a given page with a set id.

Example

var template = $("#container"); // note - can also be a string: "#container"
$("#templatebody", template)

<div id="container">
    <div id="templatebody"></div> <!-- this div would be selected -->
</div>