更改模板数据不刷新元素

我已搜索并尝试过各种帖子中提到的建议，但目前为止没有运气。这是我的问题。我在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

更改模板数据不刷新元素

回答

相关问题