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"
}]

}

现在它什么也没显示，但我希望看到两个条目。

进行2次，但仍然无法正常工作。...items数组具有我的数据，但是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块

有用的链接：Access to object with each

Framework7在路由内循环动态内容

1 个答案: