Question

您好，对不起，这是我第一次尝试使用framework7做任何事情。我正在尝试列出我的json项目（places.json），但是当我点击该页面中历史位置的菜单项时，我将把手作为纯文本而不是值。我正在使用一个应用程序示例，其中所有页面都在索引页面中，而不是通过ajax加载。这是我的html部分：

      <div data-page="historicplaces" class="page cached">
        <div class="page-content">
          <div class="content-block-title">Choose place</div>
          <div class="content-block">                
            <div class="list-block">
              <ul>{{#each this}}
              <li>
              <a href="detail.html" class="item-content item-link" data-context-name="historicplaces.{{@index}}">
              <div class="item-inner">
              <div class="item-title">{{Name}}</div>
              </div></a>
             </li>{{/each}}
             </ul>
            </div>  
          </div>
        </div>
      </div>

这是我的javascript：

Template7.registerHelper('json_stringify', function (context) {
    return JSON.stringify(context);
});    
var myApp = new Framework7({
    animateNavBackIcon:true
});    
var $$ = Dom7;    
function getPlaces() {
    $$.getJSON('places.json', function(json) {
        myApp.template7Data.historicplaces = json ;
    });
};
getPlaces();    
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true,
    domCache: true
});

Answer 1

您使用的语法不太正确：如果您尚未在当前上下文中设置任何属性，则无法使用{{#each this}}迭代当前上下文的属性。

我会做这样的事情：

  <div data-page="historicplaces" class="page cached">
    <div class="page-content">
      <div class="content-block-title">Choose place</div>
      <div class="content-block">                
        <div class="list-block">
          <ul>
          {{#each this.places}}
          <li>
          <a href="detail.html" class="item-content item-link">
            <div class="item-inner">
              <div class="item-title">{{Name}}</div>
            </div>
          </a>
         </li>
         {{/each}}
         </ul>
        </div>  
      </div>
    </div>
  </div>

使用Javascript：

  var myApp = new Framework7({
      animateNavBackIcon:true
  });    
  var $$ = Dom7;    
  function getPlaces() {
      $$.getJSON('places.json', function(json) {
          mainView.load({
            url: "#historicplaces",
            context: {
                places: json
            }              
          });
      });
  };
  var mainView = myApp.addView('.view-main', {
      dynamicNavbar: true,
      domCache: true
  });
  getPlaces();

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container" id="content-wrap">
  <script id="template" type="text/template7">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Occupation</th>
          <th>Hometown</th>          
        </tr>
      </thead>
      <tbody>
        {{#each peoples}}
          <tr>
            <td>{{name}}</td>
            <td>{{occupation}}</td>            
            <td>{{hometown}}</td>            
          </tr>
        {{/each}}
      </tbody>
    </table>
  </script>
</div>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/template7/1.4.0/template7.min.js"></script>
  <script type="text/javascript">
    var json = {
      peoples: [{
          name: "Johny doe",
          occupation: "Web designer",
          hometown: "New york"
      }, {
          name: "Mark Davis",
          occupation: "Photographer",
          hometown: "Germany"
      }, {
          name: "Susan White",
          occupation: "Seo executive",
          hometown: "Greenland"
      }, {
          name: "Joseph Groce",
          occupation: "PHP developer",
          hometown: "Australia"
      }, {
          name: "Mohammad Wali",
          occupation: "Web developer",
          hometown: "India"
      }, {
          name: "Eddie Blom",
          occupation: "Web designer",
          hometown: "New york"
      }, {
          name: "John Anderson",
          occupation: "Graphic designer",
          hometown: "New york"
      }, {
          name: "Helen Nelson",
          occupation: "Web developer",
          hometown: "Australia"
      }]
  };

  // for professional search page card details on right hand side
  var template = document.querySelector('#template').innerHTML;
  var template_compiled = Template7(template).compile();

  var details_compiledRendered = template_compiled(json);
  document.querySelector('#content-wrap').innerHTML = details_compiledRendered;
    
 

  </script>
</body>
</html>

车把不显示任何数据模板7

2 个答案: