Javascript Jquery$样板_Javascript_Jquery

Javascript Jquery$样板

javascript jquery

Javascript Jquery$样板,javascript,jquery,Javascript,Jquery,您好，我正在学习如何使用javascript和jquery库编程，我偶然发现了一个问题，我在这里从这段代码学习 <!DOCTYPE html>  <html> <head> <script src="//code.jquery.com/jquery-

您好，我正在学习如何使用javascript和jquery库编程，我偶然发现了一个问题，我在这里从这段代码学习

    <!DOCTYPE html>
<!-- To run the current sample code in your own environment, copy this to an html page. -->

<html>
<head>
  <script src="//code.jquery.com/jquery-1.11.3.js"></script>
  <base href="//www.jsviews.com/samples/jsrender/composition/remote-tmpl/"/>
  <script src="../../../../download/jsrender.js"></script>

  <link href="sample.css" rel="stylesheet">
</head>
<body>

<button id="show1">Show People1</button>
<button id="show2">Show People2</button>

<div id="peopleList"></div>


<script>
function lazyGetTemplate(name) {
  // If the named remote template is not yet loaded and compiled
  // as a named template, fetch it. In either case, return a promise
  // (already resolved, if the template has already been loaded)
  var deferred = $.Deferred();
  if ($.templates[name]) {
    deferred.resolve();
  } else {
    $.getScript(
      "//www.jsviews.com/samples/resources/templates/"
              + name + ".js")
      .then(function() {
        if ($.templates[name]) {
          deferred.resolve();
        } else {
          alert("Script: \"" + name + ".js\" failed to load");
          deferred.reject();
        }
      });
  }
  return deferred.promise();
}

function showPeople(people) {
  $.when(

    lazyGetTemplate("people"),
// '<div>{{:name}} lives in {{for address tmpl="address" /}}</div>'
// fetched from www.jsviews.com/samples/resources/templates/people.js

    lazyGetTemplate("address")
// Template: '<b>{{>city}}</b>'
// fetched from www.jsviews.com/samples/resources/templates/address.js

  )
    .done(function() {
      // Render once all templates for template composition are loaded
      var html = $.templates.people.render(people);
      $("#peopleList").html(html);
    });
}

var people1 = [
    {
      "name": "Pete", "address": { "city": "Seattle" }
    },
    {
      "name": "Heidi", "address": { "city": "Sidney" }
    }
  ],

  people2 = [
    {
      "name": "Adriana", "address": { "city": "Dubai" }
    },
    {
      "name": "Robert", "address": { "city": "London" }
    }
  ];

$("#show1").on("click", function() {
  showPeople(people1);
});

$("#show2").on("click", function() {
  showPeople(people2);
});

</script>

</body>
</html>

它似乎正在存储类似$.templates[name]这样的模板。本例中的一个名称是people，因此可以像$.templates.people一样访问。据我所知。people来自lazyGetTemplate的定义，它调用一个名为$template[name]的文件名，因为文件名叫做people.js，所以他可以像$templates.people？people来自（看看那个实际的文件），是的，是由lazyGetTemplate加载的。

var html = $.templates.people.render(people);