Polymer v1.0 iron-list 距离计算，因为每个项目都在列表上创建

Question

目前我对聚合物铁列表的了解非常少，我想知道从 json 数据中获取经纬度坐标并计算距离的最佳方法是什么每个项目并插入结果。

在Jquery中这很简单eg

$.getJSON(getthis, function(data) {

    $.each(data.items, function(i, value){
    
    itemlat   = value.lat;
    itemlng   = value.lng;
    dist      = distance(lat,lng,itemlat,itemlng);
    
    $(".main-content").append("<paper-item>....<span class='dist'>"+dist+"</span></paper-item>");
    });

});

我有获取用户设备地理位置的代码和计算两个地理位置之间距离的函数，通过使用 iron-list 演示我设法计算了距离，但我确定它 wrong/long 绕口令。

代码

<body unresolved>

  
  <template is="dom-bind">
    <iron-ajax id="ajaxPost" url="the-url" last-response="{{data}}"></iron-ajax>

    <paper-scroll-header-panel class="fit" condenses keep-condensed-header>
      <paper-toolbar class="tall">
        <paper-icon-button icon="arrow-back"></paper-icon-button>
        <div class="flex"></div>
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>
        <div class="bottom title">iron-list</div>
      </paper-toolbar>
      <iron-list items="[[data.items]]" as="item">
        <template>
          <div>
            <div class="item">
              <iron-image style="box-shadow: 0 0 5px rgba(0,0,0,0.50);background-color:gray;width:80px; height:80px;" sizing="cover" src="[[item.path]]" preload></iron-image>
              <div class="pad">
                <div class="primary">[[item.the_title]]</div>
                <div class="secondary">[[item.info]]</div>
                <div class="dist secondary dim"><span>[[item.lat]]</span>,<span>[[item.lng]]</span></div>
              </div>
              <iron-icon class="bookmark" icon$="[[iconForItem(item)]]"></iron-icon>
              <iron-icon icon="more-vert"></iron-icon>
            </div>
          </div>
        </template>
      </iron-list>
    </paper-scroll-header-panel>
  </template>

  <script>

  var lat,lng;

  function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {

  }
}

function showPosition(position) {
  lat = position.coords.latitude; 
  lng = position.coords.longitude;
}

function distance(lat1,lon1,lat2,lon2) {
  var R = 6371; // km (change this constant to get miles)
  var devlat = (lat2-lat1) * Math.PI / 180;
  var dLon = (lon2-lon1) * Math.PI / 180; 
  var a = Math.sin(devlat/2) * Math.sin(devlat/2) +
  Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * 
  Math.sin(dLon/2) * Math.sin(dLon/2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c;
  if (d>1) return Math.round(d)+" km";
  else if (d<=1) return Math.round(d*1000)+" m";
  return d;
}

function finddist() {
setTimeout(function(){  
var items = document.getElementsByClassName("dist");
Array.prototype.forEach.call(items, function(elements, index) {
var text = elements.textContent
if(text.indexOf(',') > -1)
{
var array = text.split(',');
var thislat = array[0];
var thislng = array[1];
var dist      = distance(lat,lng,thislat,thislng);
elements.innerHTML = dist;
}
});
}, 0);
}


    document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
      finddist(); 
      return item ? (item.integer < 10000 ? 'star-border' : 'star') : '';
    };

    document.addEventListener('paper-header-transform', function(event) {
      var title = this.querySelector('.title');
      var detail = event.detail;
      var deltaHeight = detail.height - detail.condensedHeight;
      var scale = Math.max(0.6, (deltaHeight - detail.y) / (deltaHeight / 0.4)  + 0.6);

      Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
    });

function findlocation() {
 if(lat) {
    clearInterval(getloc);
    document.getElementById("ajaxPost").generateRequest();

 }
 else {
getLocation();

}
}
var getloc = setInterval(findlocation, 1000);

  </script>
</body>

结果

上面的代码一直等到用户的地理位置可用，然后使用 document.getElementById("ajaxPost").generateRequest(); 启动 iron-ajax 从 json 数据中打印出带有纬度和经度的 iron-list 项目对于 <div class="dist secondary dim"><span>[[item.lat]]</span>,<span>[[item.lng]]</span></div> 中的每个项目，当为项目打印星形图标时，它运行 finddist(); 函数通过从 <div class="dist secondary dim"><span>[[item.lat]]</span>,<span>[[item.lng]]</span></div>.

抓取项目坐标来计算距离

工作正常，但我非常确定这是迄今为止错误的方法。

这是我正在使用的新代码，因为我想将整个 ajax,iron list 例程移动到 dom-module 中并希望一些帮助计算飞行距离。

<body unresolved>
  <paper-scroll-header-panel class="fit" condenses keep-condensed-header>
  <paper-toolbar class="tall">
  <paper-icon-button icon="arrow-back"></paper-icon-button>
  <div class="flex"></div>
  <paper-icon-button icon="search"></paper-icon-button>
  <paper-icon-button icon="more-vert"></paper-icon-button>
  <div class="bottom title">iron-list</div>
</paper-toolbar>
<my-request></my-request>
</paper-scroll-header-panel>  

<dom-module id="my-request">
 <style>

    iron-list {
      background-color: var(--paper-grey-200, #eee);
      
    }

    .item {
      @apply(--layout-horizontal);

      margin: 16px 16px 0 16px;
      padding: 20px;

      border-radius: 8px;
      background-color: white;
      border: 1px solid #ddd;
    }

    .pad {
      padding: 0 16px;
      @apply(--layout-flex);
      @apply(--layout-vertical);
    }

    .primary {
      font-size: 16px;
      font-weight: bold;
    }

    .secondary {
      font-size: 14px;
    }

    .dim {
      color: gray;
      position: absolute;
      right: 70px;
      bottom: 10px;
    }
    .bookmark {
      position: absolute;
      bottom: 10;
      right: 37px;
      color:#D3D3D3;
    }


  </style>
<template>
  <iron-ajax auto id="ajaxPost" url="the-url" handle-as="json" last-response="{{data}}" on-response="handleResponse"></iron-ajax>
  <iron-list items="{{data.items}}" as="item">

  <template>
    <div>
      <div class="item">
        <iron-image style="box-shadow: 0 0 5px rgba(0,0,0,0.50);background-color:gray;width:80px; height:80px;" sizing="cover" src="[[item.path]]" preload></iron-image>
        <div class="pad" style="">
          <div class="primary">{{item.the_title}}</div>
          <div class="secondary">{{item.info}}</div>
          <div class="dist secondary dim"><span>{{item.lat}}</span>,<span>{{item.lng}}</span></div>
        </div>
        <iron-icon class="bookmark" icon="star"></iron-icon>
        <iron-icon icon="more-vert"></iron-icon>
      </div>
    </div>
  </template>
</iron-list>
</template>
</dom-module>

<script>
  (function() {
    Polymer({
      is: 'my-request',
      handleResponse: function() {
        console.log('handleResponse');
      }

    });
  })();
</script>

</body>

谢谢

Answer 1

亲，就是这么简单

感谢@Ben Thomas 提供 link 到 Computed Binding 文档

<div class="dist secondary dim"><span>{{doThisOnce(item.lat,item.lng)}}</span>

...

Polymer({
      is: 'my-request',

      handleResponse: function () {

      },

      doThisOnce: function(lat,lng) {

       console.log(lat+"=="+lng);
       // calculate distance
      // return result
     }
     });

Polymer v1.0 iron-list 距离计算，因为每个项目都在列表上创建

Polymer v1.0 iron-list distance calculation as each item is created on the list

polymer

polymer-1.0