谷歌聚合物：谷歌地图搜索不起作用

Question

  <paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
       <div class="find-area"> 
        <paper-textarea on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-textarea> 
       </div> 
       <div class="map-area"> 
        <google-map id="[[map]]" 
           api-key="000000000myapi000000" 
          latitude="[[lat]]" 
          longitude="[[lon]]" 
          fit-to-markers> 
        </google-map> 
        <google-map-search id="google_search" 
             globalSearch="true" 
             map="[[map]]" 
             results="[[results]]"> 
        </google-map-search> 
       </div> 
       <paper-button on-tap="[[upload]]">Accept</paper-button> 
       <label>coords:[[ results::lat ]], [[ results::lon ]]</label> 
       <label>query:[[ query ]]</label> 
       <label>map:[[ map ]]</label> 
       <label>results:[[results]]</label> 
      </paper-dialog> 
<script> 
      function _showPosition(position) { 
      try { 
       x.latitude = position.coords.latitude; 
       x.longitude = position.coords.longitude; 
      }catch (err){ 
       alert(err+'; position:'+position) 
      } 

     } 
     function showError(error) { 
      alert('error:'+ error) 
     }*/ 
     function _submit(event) { 
      Polymer.dom(event).localTarget.parentElement.submit(); 
     } 
     Polymer({ 
       is: 'profile-new-post', 
       properties: { 
        enable : { 
         type: Boolean, 
         value: true 
        }, 
        lat : { 
         value : 37.77493 
        }, 
        lon : { 
         value : -122.41942 
        }, 
        query : { 
         type : String, 
         value : "" 
        }, 
        results : { 
         type : Array 
        }, 
        map : { 
         type : Object 
        } 
       }, 
       func : function (e) { 
        this.map = this.$.map; 
        post.open(); 
       }, 
       find : function (e) { 
        this.$.google_search.query = this.$.find_textarea.value; 
        this.query = this.$.google_search.query; 
        this.$.google_search.search(); 
        this.lat = this.$.google_search.results.latitude; 
        this.lon = this.$.google_search.results.longitude; 
        //alert(this.$.google_search.results.latitude + '; ' + this.$.google_search.results.longitude) 
       }, 

我试图使用[[]]括号，因为django使用{{}}。输出标签中的地图，结果和坐标是空的。它显示与旧金山的地图，但是当我尝试在输入中打印文本时，它不想搜索。控制台中没有任何错误。我已经看到了谷歌关于这个的视频教程视频，但是有一个老版本的聚合物，很多东西像{{$ .element.atribute}}在元素头里面不起作用（它不知道'$'是什么） 。也许有人可以为我解释[[]]和{{}}之间最大的区别是什么，因为我无法从官方教程中理解它？

解决：解决它，我必须把源来自内部对话框，新模板与属性=“DOM绑定

 <p><paper-button raisedButton on-tap="upload">Upload</paper-button></p> 
     <paper-button id="dialogbutton" on-tap="func">Post</paper-button> 
     <paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
      <template is="dom-bind"> 
       <div class="find-area"> 
        <paper-input value="{{ input_query }}" on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-input> 
       </div> 
       <div class="map-area"> 
        <google-map-search 
          id="google_search" 
          map="{{ map }}" 
          query="{{ input_query }}" 
          results="{{results}}" 
          on-google-map-search-results="searchingComplite"> 
         </google-map-search> 
         <google-map 
           map="{{map}}" 
           latitude="{{results[0}.latitude}}" 
           longitude="{{results[0}.longitude}}"> 
         </google-map> 
       </div> 
       <paper-button on-tap="upload">Accept</paper-button> 
       <label>coords:{{ lat }}, {{ lon }}</label> 
       <label>query:{{ query }}</label> 
       <label>map:{{ map }}</label> 
       <label>results:{{ results }}</label> 
      </template> 

Answer 1

有几个问题在这里：

1. 是的，[[]]括号是这里的问题，因为它们强制执行单向绑定，这意味着google-map-search的results不能向上传播，而标签是空的，您需要更改结果s = [[results]]至results={{results}}启用双向绑定
2. 对于declerative事件处理程序，您不需要任何括号。那么这条线<paper-button on-tap="[[upload]]">Accept</paper-button>应该是？ <paper-button on-tap="upload">Accept</paper-button>
3. 要访问数据绑定对象的子属性，您需要使用点符号（.）。此行<label>coords:[[ results::lat ]], [[ results::lon ]]</label>应改为<label>coords:[[ results.lat ]], [[ results.lon ]]</label>
4. 我也会改变lat和lon来计算的特性，这要么返回默认值（或者只是使用你的google-map元素的属性）或值从您的搜索结果。