Как я могу открыть новую страницу, щелкнув элемент представления списка с контекстом, зависящим от выбранного элемента?

я работаю с phonegap, framework7 и template7. У меня есть представление списка, заполненное объектом json с сервера, и я хочу открыть страницу сведений в зависимости от нажатого элемента. Я пытался использовать свойство data-context-name и template7data (в файле js), но я мог передавать только статические данные, ничего с сервера. Я надеюсь, что кто-то может мне помочь! Это мое приложение 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>

cordova html-framework-7
person Sant    schedule 29.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте этот подход.

<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});
}
person Christian David Zapanta    schedule 15.02.2017
comment
Я пробовал этот подход, но rowid кажется пустым, когда я использую console.log(rowid), он ничего не показывает. Поэтому я не могу получить доступ к каким-либо данным с ним. ПД: спасибо, вы возвращаете мой проект к жизни - person Sant; 16.02.2017