Framework7 Loop Динамический контент внутри маршрута - PullRequest
Новая
       37

Framework7 Loop Динамический контент внутри маршрута

0 голосов
/ 03 июля 2018

Я использую 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, но все еще не работает .... Массив 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}}

1 Ответ

0 голосов
/ 09 июля 2018

Когда вы используете данные как Template7, вы должны использовать синтаксис Template7 (ср. раздел синтаксиса выражений )

Так что в вашем случае вам нужно обновить v-for до each block

Полезная ссылка: Доступ к объекту с каждым

...