Question

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

HTML 的 show.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>

myApp.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：

php artisan migrate.

并加载这些JavaScript变量：请勿使用{{trashIcon}}但使用+ trashIcon +

app.on('pageInit', function (e, page) { var ios = this.theme.ios; var trashIcon = ios ? 'trash' : 'delete'; var composeIcon = ios ? 'compose' : 'edit'; });

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

2 个答案: