如何在 Framework7 预处理中访问数据属性

Question

我正在使用 F7 预处理和 T7 加载动态页面。我在访问存储在数据属性中的产品 ID 时遇到一些困难。问题是当用户单击产品目录中的产品时，我想要;详情页面将加载所点击商品的详细信息。但是每当我尝试这个时，我都会对 var id 进行未定义。 这是我的代码：

.HTML 显示.html

{{#each this}}
       <div class="content-block"><!--Block Content-->
         <div class="row"> <!--Block Content row-->
               <div class="col-25">
                  <a href="show.html" class="link" data-id={{id}}>
               <div class="item-media"><img src="{{product_image}}" width="100" height="100"></div>
            </a>
               <h3>{{product_name}}</h3>
                  <div class="chip"> 
             <div class="chip-label">KES.{{price}}</div> 
                        </div>
               <p>{{product_desc}}</p>
               <div class="row">
                  <div class="col-50">
                     <a href="#" class="button button-small button-fill color-blue">Add to Cart</a></div> 

                   <div class="col-50">
                     <a href="#" class="button button-small button-fill color-gray">Add to Wishlist</a></div> 
                  </div>
                  </div>             

我的应用.js

var myApp = new Framework7({
        template7Pages: true, // enable Template7 rendering for Ajax and Dynamic pages
         animateNavBackIcon: true,
           // Enabled rendering pages using Template7
   template7Pages: true,
  precompileTemplates: true,
    preprocess: function (content, url, next) {
      var rootUrl = 'http://localhost/phonestore/public/api/';
      switch(url)
      {
case 'show.html':
         var id = $$(this).attr('data-id');
       //alert(id) returns undefined

         //Fetch product categories and display them in list box
         var serverUrl = rootUrl+'products/'+id;
         $$.ajax({
    url: serverUrl,
    dataType: "json",
    success: function (data, textStatus, jqXHR) {
   var compiled = Template7.compile(content);
            next(compiled(data));

    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert("ERROR: " + errorThrown)
    }
});
         break;
.....
}
}

所有数据都来自服务器。如何在预处理中获取产品 id 属性。请协助。

Answer 1

F7文档在preprocess上说：

Framework7 允许您使用自己喜欢的客户端模板引擎或对加载的内容进行任何修改。

您不必通过预处理来执行此操作。

首先，删除a标签上的 href 并为其添加一个类(例如go-detail(

然后在列表项上添加事件侦听器：

$$('.content-block a.go-detail').on('click', function(event) {
    var itemId = $$(event.target).attr('data-id');
    //do ajax call to retrieve data and load show.html page !
});

我认为这是一个更简单的解决方案，通过preprocess方法传递。

Answer 2

您可以使用此方法：填充 var trashIcon 和 composeIcon：

app.on('pageInit', function (e, page) {
                var ios = this.theme.ios;
                var trashIcon = ios ? '<i class="icon f7-icons">trash</i>' : '<i class="icon material-icons">delete</i>';
                var composeIcon = ios ? '<i class="icon f7-icons">compose</i>' : '<i class="icon material-icons">edit</i>';
            });

并加载这些 JavaScript 变量：不要使用 {{trashIcon}}，而是使用 + trashIcon +

$.each(bookingsData, function (index, onedata) { bookingdatahtml = bookingdatahtml + '<tr>' + '<td class="actions-cell"><a class="link icon-only" onclick="EditThis(' + onedata.bookings_id + ')" href="javascript:void(0)">' + composeIcon + '</a>' + '<a class="link icon-only" onclick="DeleteThis(' + onedata.bookings_id + ')" href="javascript:void(0)">' + trashIcon + '</a>' + '</td >' + '</tr>' }); $$('#showBookingbyUserId').html(bookingdatahtml);