Framework7 在路由中循环动态内容

Question

我正在使用 Framework 7 在路由器中加载演示卡。问题是我不确定如何在模板显示中循环遍历多个记录。

这是我的路线

{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
  // Requested route
  // Get external data and return template7 template
  app.request.json('data.json', function (data) {
      console.log(data);
    resolve(
      // How and what to load: template
      {
        template: `<div class="page">
                    <div class="navbar">
                        <div class="navbar-inner sliding">
                          <div class="left">
                            <a href="#" class="link back">
                              <i class="icon icon-back"></i>
                              <span class="ios-only">Back</span>
                            </a>
                          </div>
                          <div class="title">News</div>
                        </div>
                      </div>
                      <div class="page-content">
                        <div class="card demo-card-header-pic">
                              <div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
                              <div class="card-content card-content-padding">
                                <p class="date">{{Title}}</p>
                                <p>{{Header}}</p>
                              </div>
                              <div class="card-footer"><a href="/about/3/" class="link">Read more</a></div>
                            </div>
                      </div>
                    </div>`
      },
      // Custom template context
      {
        context: {
          ID: data.content.ID,
            Title: data.content.Title,
            Header: data.content.Header,
            Description: data.content.Description,
            TitleImg: data.content.TitleImg,
        },
      }
    );
  });
}

},

这里是示例 json:

{
"contentType": "news",
"content": [{
    "ID": 1,
    "Title": "Test",
    "Header": "Short Text",
    "Description": "lorem ipsum",
    "TitleImg": "/img/collab.jpg"
}, {
    "ID": 2,
    "Title": "Test2",
    "Header": "Short Text2",
    "Description": "lorem ipsum2",
    "TitleImg": "/img/collab.jpg"
}]

}

目前它没有显示任何内容，但我想查看这两个条目。

TAKE 2 但仍然不起作用....项目数组有我的数据但 for 循环不起作用

{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
  // Requested route
  // Get external data and return template7 template
  app.request.json('data.json', function (data) {
      for (var i = 0; i < data.content.length; i++) {
          items.push({
            ID: data.content[i].ID,
            TitleImg: data.content[i].TitleImg,
            Title: data.content[i].Title,
            Header: data.content[i].Header
          });
        }
      console.log(items);
    resolve(
      {
        template: `<div class="page">
                    <div class="navbar">
                        <div class="navbar-inner sliding">
                          <div class="left">
                            <a href="#" class="link back">
                              <i class="icon icon-back"></i>
                              <span class="ios-only">Back</span>
                            </a>
                          </div>
                          <div class="title">News</div>
                        </div>
                      </div>
                      <div class="page-content">
                        <div class="card demo-card-header-pic" v-for="item in items">
                              <div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
                              <div class="card-content card-content-padding">
                                <p class="date">{{Title}}</p>
                                <p>{{Header}}</p>
                              </div>
                              <div class="card-footer"><a href="/about/{{ID}}/" class="link">Read more</a></div>
                            </div>
                      </div>
                    </div>`
      },
      {
        items: items,
      }
    );
  });
}

},

编辑 - 工作解决方案感谢@djiggy

{{#each items}}
                        <div class="card demo-card-header-pic">
                            <a href="/about/{{ID}}/">
                              <div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"><div class="card-headerTxt">{{Title}}</div></div>
                              <div class="card-content card-content-padding">
                                <p>{{Header}}</p>
                              </div>
                                </a>
                            </div>
                        {{/each}}

Answer 1

使用数据作为Template7时，必须使用Template7语法（参见expressions syntax section）

因此在您的情况下，您必须将 v-for 更新为 each 块

有用link：Access to object with each

Framework7 在路由中循环动态内容

Framework7 Loop Dynamic Content within Route

vue.js

html-framework-7

vue-router