Question

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

创建了一个month-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'，function（e）{// doStuff}）;.我使用此功能拨打谷歌客户端API。我创建了一个客户端请求，然后执行request.execute（handleCallback）; 一旦这个调用通过，我就会进入handleCallback函数。在这个函数中，我对响应数据进行了一些处理，并将部分数据保存到文件中已有的json变量中。一旦完成所有处理，我就会做类似下面的事情。

 monthView.month = json;

但是上面这行并没有使用最新数据刷新我的UI。有什么我想念的吗？任何建议或我做错的事。

Answer 1

你需要使用＆＃39; set＆＃39;或者＆＃39; notifyPath＆＃39;在javascript中更改Polymer Object或Arrays以使数据绑定/ obserers工作。您可以在https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#path-binding

中详细了解相关信息

在你的情况下尝试下面的代码

monthView.set('month',json);

更新了建议：

用主页在主页上包装脚本。这是非Chrome浏览器所必需的。

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

这可能是范围问题。尝试执行＆＃39; document.querySelector（＆＃39;＃month-view-element＆＃39;）;＆＃39;在你的回调addWorkHoursCallBack里面。另外，使用.notifyPath而不是.set。

更改模板数据而不刷新元素

1 个答案: