Question

<?php
function curlRequest($url){
     $curl = curl_init();
     $time = microtime(true);
     curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 5);
     curl_setopt($curl, CURLOPT_USERAGENT,'Mozilla/5.0 (compatible; Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');
     curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
     curl_setopt($curl, CURLOPT_MAXREDIRS, 10);
     curl_setopt($curl, CURLOPT_URL, $url);
     curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
     $data = curl_exec($curl);
     curl_close($curl);
     return $data;
}
echo curlRequest('https://www.reddit.com/api/info.json?url=http://google.com');
?>

我正在使用dom-repeat创建一些路由。我希望这些路线有不同的颜色。他们没有。似乎每条路线都使用相同的渲染器。如何更改每条路线的渲染器？

Answer 1

事实证明，代码中唯一缺少的部分是attribute-binding的一个字符。

为了将compound binding反序列化为JSON对象，需要以下内容：

属性绑定语法（即$=）即使绑定到属性
围绕值而不是双引号的单引号
目标属性必须是Object类型（<google-map-directions>.rendererOptions都是如此）

// template
<google-map-directions map="[[map]]"
        renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
        ... >

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="google-map/google-map.html">
  <link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
  <x-foo></x-foo>
  
  <dom-module id="x-foo">
    <style>
      google-map {
        height: 600px;
      }
    </style>
    <template>
      <google-map map="{{map}}" latitude="37.779"
                  longitude="-122.3892"></google-map>

      <template is="dom-repeat" items="{{routes}}">
        <google-map-directions map="[[map]]"
            start-address="{{item.startAddress}}"
            end-address="{{item.endAddress}}"
            travel-mode="BICYCLING"
            renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
            waypoints="{{item.waypoints}}"></google-map-directions>
      </template>

    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties: {
            routes: {
              type: Array,
              value: function() {
                return [
                  {
                    color: '#0000FF',
                    startAddress: 'San Francisco',
                    endAddress: 'Mountain View',
                    waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
                  },
                  {
                    color: '#FF0000',
                    startAddress: 'Oakland',
                    endAddress: 'San Jose',
                    waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
                  },
                ];
              }
            }
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

或者，您可以使用computed binding根据给定的颜色和路径索引返回相应的渲染器选项：

// template
<google-map-directions map="[[map]]"
        renderer-options="{{_getRendererOptions(item.color, index)}}"
        ... >

// script
Polymer({
  ...
  _getRendererOptions: function(strokeColor, index) {
    return {
      draggable: true,
      polylineOptions: {
        draggable: true,
        strokeColor: strokeColor,
        routeIndex: index
      }
    };
  }
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="google-map/google-map.html">
  <link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
  <x-foo></x-foo>
  
  <dom-module id="x-foo">
    <style>
      google-map {
        height: 600px;
      }
    </style>
    <template>
      <google-map map="{{map}}" latitude="37.779"
                  longitude="-122.3892"></google-map>

      <template is="dom-repeat" items="{{routes}}">
        <google-map-directions map="[[map]]"
            start-address="{{item.startAddress}}"
            end-address="{{item.endAddress}}"
            travel-mode="BICYCLING"
            renderer-options="{{_getRendererOptions(item.color, index)}}"
            waypoints="{{item.waypoints}}"></google-map-directions>
      </template>

    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties: {
            routes: {
              type: Array,
              value: function() {
                return [
                  {
                    color: '#0000FF',
                    startAddress: 'San Francisco',
                    endAddress: 'Mountain View',
                    waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
                  },
                  {
                    color: '#FF0000',
                    startAddress: 'Oakland',
                    endAddress: 'San Jose',
                    waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
                  },
                ];
              }
            }
      
          },
          _getRendererOptions: function(strokeColor, index) {
            return {
              draggable: true,
              polylineOptions: {
                draggable: true,
                strokeColor: strokeColor,
                routeIndex: index
              }
            };
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

聚合物选项设置和结果

1 个答案: