Question

我正在使用phonegap，framework7和template7。我有一个列表视图，其中填充了来自服务器的json对象，我打算根据单击的项目打开详细信息页面。我尝试过使用data-context-name属性和template7data（在js文件中），但我只能传递静态数据，而不是服务器。我希望有一个人可以帮助我！这是我的app js

var myApp = new Framework7({


template7Pages: true,
  template7Data: {
    **// HERE I WHANT TO PASS DATA FROM SERVER LIKE IN THE LIST VIEW LANE** "boliches":[{"nombre":"lalala", "descripcion":"ooooooo"},{"nombre":"lulululu", "descripcion":"aaaaaaaaaa"}]
  }
});

// Export selectors engine
var $$ = Dom7;

// ---TEMPLATE 7 ---
//Seleccionamos un template
var template = $$('#boliches-template').html();

//Compilamos y renderizamos el template
var compiledTemplate = Template7.compile(template);

function crearBoliches() {
  // Obtenemos los datos de nuestro archivo JSON
  $$.getJSON('https://api.myjson.com/bins/ednth', function (json) {
    //Insertamos el template renderizado en un contenedor
    $$('#boliches-content').html(compiledTemplate(json))
    var mySearchbar = myApp.searchbar('.searchbar', {
        searchList: '.list-block-search',
        searchIn: '.item-title'
    });
    $( "#loader" ).css("display", "none");
  });
};

// Ejecutamos la funcion para obtener los boliches
crearBoliches();

myApp.onPageInit('about', function (page) {
})

这是我的HTML列表

<div class="list-block list-block-search searchbar-found media-list">
                    <ul>
                      {{#each boliches}}
                      <a href="about.html" class="item-link" data-context-name="{{@index}}">
                      <li class="cards" style="background-image: url({{urlCard}});">
                          <div class="item-inner">
                            <div class="item-title">
                              {{nombre}}
                            </div>
                            <div class="item-text"> {{ciudad}}</div>
                          </div>
                      </li>
                      </a>
                      {{/each}}
                    </ul>
                  </div>

Answer 1

尝试这种方法。

<ul>
 {{#each boliches}}
 <a href="#" id="{{rowid}}" class="item-content item-link" onclick='bolichesdetail(this)'>
   <li class="cards" style="background-image: url({{urlCard}});">
     <div class="item-inner">
       <div class="item-title">
         {{nombre}}
       </div>
       <div class="item-text"> {{ciudad}}</div>
     </div>
    </li>
  </a>
 {{/each}}
</ul>

然后只需在您的js文件中添加您的详细信息处理。

function bolichesdetail(obj){
    var rowid = obj.id; 
    // insert ajax query via rowid here
    // create the object upon successful query and assign the needed data taken from response
    var BolichesData = new Object();
    // then open the details page
    mainView.router.load({url:'bolichesdetail.html',context:BolichesData});
}

如何通过单击具有上下文的列表视图项来打开新页面，具体取决于所单击的项目？

1 个答案: