クリックしたアイテムに応じてコンテキストを持つリストビューアイテムをクリックして新しいページを開くにはどうすればよいですか？

Question

私はphonegap、framework7とtemplate7で作業しています。私はリストビューをjsonオブジェクトをサーバーから挿入し、クリックしたアイテムに応じて詳細ページを開くことを望んでいます。私は（jsファイル内の）data-context-nameプロパティとtemplate7dataで試しましたが、私は静的データだけを渡すことができ、サーバからは何も渡せませんでした。私は誰かが私を助けることを願っていますこれは私のアプリの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}); 
}