使用Handlebars.js传递数据

Question

我已经创建了一个基本应用程序来测试handlebars.js，我正在努力在我的页面之间传递数据。我想要的是从JSON文件中读取一个国家/地区列表，然后用户可以单击一个国家/地区以获取更多详细信息。数据在第一页上加载正常，但是当我点击链接时，如果没有加载数据，则会转到下一页。

有人可以解释我哪里出错吗？

第一页：

  <div data-page="countrylist" class="page">
    <div class="page-content">
      <div class="content-block-title">Choose a country:</div>
      <div class="list-block">
        <ul>
          {{#each this}}
          <li>
            <a href="detail.html" class="item-content item-link" data-context-name="countrylist.{{@index}}​">
              <div class="item-inner">
                <div class="item-title">{{Country}}​</div>
              </div>
            </a>
          </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>

详细页面：

<div data-page="countrylist" class="page">
    <div class="page-content">
      <div class="content-block inset">
        <div class="content-block-inner">
          <h3>{{Country}}​</h3>
          <ul>
            <li>Region: {{Region}}</li>
            <li>Population: {{Population}}</li>
            <li>Area Sq. Mile: {{AreaSqMile}}</li>
            <li>Population Density per sq. Mile: {{PopulationDensity}}</li>
            <li>NetMigration: {{NetMigration}}</li>
            <li>GDP $ per capita: {{GDP}}</li>
            <li>Phones per 1000: {{Phones}}</li>
            <li>Arable %: {{Arable}}</li>
            <li>Climate: {{Climate}}</li>
            <li>Birthrate: {{Birthrate}}</li>
            <li>Deathrate: {{Deathrate}}</li>
            <li>Agriculture: {{Agriculture}}</li>
            <li>Industry: {{Industry}}</li>
            <li>Service: {{Service}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

使用Javascript：

Template7.registerHelper('json_stringify', function (context) {
  return JSON.stringify(context);
});

var myApp = new Framework7({
  animateNavBackIcon: true,
  // Enable templates auto precompilation
  precompileTemplates: true,
  // Enabled pages rendering using Template7
  template7Pages: true
  // Specify Template7 data for pages
});

// Export selectors engine
var $$ = Dom7;

function getCountries() {
  $$.getJSON('../countries.json', function (json) {
    myApp.template7Data.countrylist = json ;
  });
};

getCountries();

// Add main View
var mainView = myApp.addView('.view-main', {
  // Enable dynamic Navbar
  dynamicNavbar: true,
});