更改模板數據不刷新元素

我已搜索並嘗試過各種帖子中提到的建議，但目前爲止沒有運氣。這是我的問題。我在mainpage.html中創建了一個自定義元素<month-view id="month-view-element"></month-view>。在最初加載此頁面的mainpage.html內部，我爲一個月的所有30天創建了一個空的json對象，並在UI中打印佔位符類型的卡片。使用下面的代碼。更改模板數據不刷新元素

var json = []; 
for(var x = 0; x < total; x++) { 
    json.push({'hours': 0, 'day': x+1, 'year': year}); 
} 
    monthView.month = json; //Doing this line. Prints out the desired empty cards for me in the UI.

創建一個月的view.html類似下面：

<dom-module id='month-view'> 
<template> 
<template is="dom-repeat" items= "{{month}}"> 

<paper-card class="day-paper-card" heading={{item.day}}> 
    <div class="card-content work">{{item.work}}</div> 
    <div class="card-actions containerDay layout horizontal"> 
    <div style="display:inline-block" class="icon"> 
       <paper-icon-button icon="icons:done" data-hours = "8" data-day$="{{item.day}}" data-month$={{item.month}} data-year$={{item.year}} on-click="updateWorkHours"></paper-icon-button> 
       <paper-tooltip>Full day</paper-tooltip> 
    </div> 
    </div> 
</paper-card> 
</template> 
</template> 

<script> 
    Polymer({ 
     is: "month-view", 
     updateWorkHours: function (e, detail) { 
      console.log(e); 
      this.fire('updateWorkHour', {day: e.target.dataHost.dataset.day, 
             month: e.target.dataHost.dataset.month, 
             year: e.target.dataHost.dataset.year, 
             hours: e.target.dataHost.dataset.work 
             }); 

     } 
    }); 
</script> 

</dom-module>

還有另一個文件的script.js其中包含功能document.addEventListener（ 'updateWorkHour'，函數（E）{//做東西 }）;。我使用此函數來調用Google客戶端API。我創建了一個客戶端請求，然後執行request.execute（handleCallback）; 一旦這個調用通過，我登陸handleCallback函數。在這個函數中，我對響應數據做了一些處理，並將部分數據保存到文件中已有的json變量中。一旦所有的處理完成，我做了如下所示。

monthView.month = json;

但是，這上面的行不刷新我的UI與最新的數據。有什麼我失蹤？任何建議或任何我做錯了。

來源

2015-10-20 Srikanth

在更改JavaScript中的聚合物對象或數組時，您需要使用'set'或'notifyPath'，以使數據綁定/ obserer能夠正常工作。你可以閱讀更多關於它在https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#path-binding

在你的情況下，嘗試下面的代碼

monthView.set('month',json);

更新建議：

總結與主網頁腳本。這對於非Chrome瀏覽器是必需的。

addEventListener('WebComponentsReady', function() {})

這可能是範圍界定問題。嘗試執行'document.querySelector（'＃month-view-element'）;'在你的回調addWorkHoursCallBack裏面。另外，使用.notifyPath而不是.set。

來源

2015-10-20 13:40:48 Srik

我試過monthView.set（'month'，json）;以及。但它沒有反映新的數據。我在上面的行之前嘗試了console.log（json），並發現json根據需要正確更新。但monthView.set（'month'，json2）不起作用。 – Srikanth

@Srikanth a jsbin將有助於查看代碼中發生了什麼。 – Srik

我有我的代碼在多個文件中，所以不知道我是如何在jsbin中創建的。但是我會嘗試將大部分代碼複製到它中，並且會稍微分享一下。感謝您的檢查。 – Srikanth

更改模板數據不刷新元素

回答

相關問題