Polymer 1.x：观察员 [英] Polymer 1.x: Observers
本文介绍了Polymer 1.x：观察员的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最终，我想从 中选择个别州。但是这个问题仅限于让标记为 通过以下步骤重现问题： 注意控制台显示： 您选择的是：科罗拉多州，南达科他州，德克萨斯州 这是预期的每一行： 但是，我希望控制台 也 阅读： 选择 每一行： 应由以下一组观察员调用。 _computeData 的观察者在响应变异所选状态的数组时触发。 / p>
console.log（'你选择：'+ this.selected）; //正确记录
_computeData：function（）{
console.log（'selected'）; //没有正确记录;功能不叫？
...
http://jsbin.com/wuqugigeha/1/edit?html,console,output
.. 。
观察员：[
'_computeData（items。*，selected。*）'，
'_dataChanged（data。*）'，
]，
.. 。
问题
什么是去吧？为什么观察者不调用 _computeData 方法？在改变选择的数组后，可以采取什么措施来解决？
http：// jsbin .com / wuqugigeha / 1 / edit？html，console，output
<！DOCTYPE html>
< head>
< meta charset =utf-8>
< base href =https://polygit.org/components/>
< script src =webcomponentsjs / webcomponents-lite.min.js>< / script>
< link href =polymer / polymer.html =import>
< link href =google-chart / google-chart.html =import> < /头>
< body>
< dom-module id =x-element> <模板>
< style>
google-chart {
宽度：100％;
}
< / style>
< br>< br>< br>< br>
< button on-tap =_ show>显示值< / button>
< button on-tap =clearAll>全部清除< / button>
< button on-tap =selectAll>选择全部< / button>
< div> [[selected]]< / div>
< google-chart
id =geochart
type =geo
options =[[options]]
data =[[data ]]
xon-google-chart-select =_ onGoogleChartSelect>
< / google-chart>
< / template>
< script>
（function（）{
Polymer（{
is：'x-element'，
properties：{
items：{
type：Array，
值：function（）{
return ['Alabama'，'Alaska'，'Arizona'，'Arkansas'，'California'，'Colorado'，'Connecticut'，'Delaware'，'Florida '，'佐治亚'，'夏威夷'，'爱达荷'，'伊利诺伊'，'印第安纳'，'爱荷华'，'堪萨斯'，'肯塔基'，'路易斯安那州'，'缅因州'，'马里兰州'，'马萨诸塞州'， '密歇根'，'明尼苏达'，'密西西比'，'密苏里'，'蒙大拿'，'内布拉斯加'，'内华达'，'新罕布什尔'，'新泽西'，'新墨西哥'，'纽约'，'北Carolina'，'North Dakota'，'Ohio'，'Oklahoma'，'Oregon'，'Pennsylvania'，'Rhode Island'，'South Carolina'，'South Dakota'，'Tennessee'，'Texas'，'Utah' ，'佛蒙特'，'弗吉尼亚'，'Washin gton'，'West Virginia'，'Wisconsin'，'Wyoming'，] .sort（）;
}，
}，
color：{
type：String，/ /'＃455A64'
value：function（）{
return'blue';
}
}，
选项：{
类型：对象，
通知：true，
reflectToAttribute：true，
计算：'_ countOptions （颜色）'，
}，
选择：{
类型：数组，
通知：true，
reflectToAttribute：true，
值：function（ ）{
return [];
}，
//观察者：'_ computeData'，//未成功尝试此
}，
数据：{
类型：数组，
通知： true，
reflectToAttribute：true，
//计算：'_ computeData（items。*，selected。*）'，//未成功试用此
}，
}，
观察者：[
'_computeData（items。*，selected。*）'，
'_dataChanged（data。*）'，
]，
//绑定选择事件听众图表
ready：function（）{
var _this = this;
this。$。geochart.addEventListener（'google-chart-select'，function（e）{
this._onGoogleChartSelect（e）;
} .bind（_this））;
}，
_computeOptions：function（）{
return {
region：'US'，
displayMode：'regions'，
resolution：'provinces '，
legend：'none'，
defaultColor：'white'，
colorAxis：{
colors：['＃E0E0E0'，this.color]，
minValue：0，
maxValue：1，
}
}
}，
//在选择事件上，计算'选中'
_onGoogleChartSelect：function（ e）{
var string = e.path [0] .textContent.split（'Select'）[0] .trim（），// eg 'Ohio'
selected = this.selected，//所选项目数组
index = selected.indexOf（string）;
//如果'string'不在'selected'数组中，请添加它;否则删除它
if（index === -1）{
selected.push（string）;
selected.sort（）;
} else {
selected.splice（index，1）;
}
this.set（'selected'，已选中）;
console.log（'你选择了：'+ this.selected）; //正确记录
//下一步应该是每个观察者的'_computeData'
}，
//'items'填充或'selected'更改后，计算'data'
_computeData：function（）{
console.log（'selected'）; //没有正确记录;功能不叫？
var data = []，
items = this.items，
selected = this.selected，
i = items.length;
while（i - ）{
data.unshift（[items [i]，selected.indexOf（items [i]）> -1？1：0]）;
}
data.unshift（['State'，'Select']）;
this.set（'data'，data）;
}，
//'数据'更改后，重绘图表
//添加延迟以避免'google not defined'错误
_dataChanged：function（）{
var _this = this;
setTimeout（function（）{
_this._drawChart（）;
} .bind（_this），100）
}，
//延迟后，绘制图表
_drawChart：function（）{
var data = this.data，
dataTable = this。$。geochart._createDataTable（data）;
console.log（dataTable）;
this。$。geochart._chartObject.draw（dataTable，this.options）;
}，
clearAll：function（）{
this.set（'selected'，[]）;
}，
selectAll：function（）{
this.set（'selected'，this.items）;
}，
_show：function（）{
console.log（'items：'+ this.items）;
console.log（'selected：'+ this.selected）;
console.log（'data：'+ this.data）;
}，
}）;
}）（）;
< / script>
< / dom-module>
< x-element color =redselected ='[Colorado，South Dakota]'>< / x-element>
< / body>
< / html>
解决方案
你的问题在这里：
if（index === -1）{
selected.push（string）;
selected.sort（）;
} else {
selected.splice（index，1）;
}
this.set（'selected'，已选中）;
Polymer的数据处理方法，如 set allow您可以向Polymer提供有关数据更改方式的具体信息，从而允许Polymer进行非常快速的DOM更新。
在这种情况下，您正在做Polymer无法看到它的工作（即数组操作），然后要求设置来弄清楚发生了什么。但是，当您调用 this.set（'selected'，selected）; 时，Polymer会看到的身份已选中没有改变（也就是说，它与之前的Array对象相同），它只是停止处理。 （Fwiw，这是一个常见的问题，因此我们正在考虑进行修改，无论如何都要检查数组。）
解决方案有两个：
1）在您对数组进行排序的情况下，通过<$ c为 set 创建一个新的数组引用$ c> slice（）：
if（index === -1）{
selected.push（string）;
selected.sort（）;
this.set（'selected'，selected.slice（））;
2）如果您只是拼接，请使用 splice 帮助函数：
} else {
this.splice（'selected'，index，1）;
}
理想情况下，您要避免对数组进行排序，然后您可以使用 this.push 直接。
注意：正在调用这些更改 _computeData ，但现在正在调用它方式太多次了。部分原因是观察选择。* 将触发选择， selected.length 和 selected.splices 。观察 selected.length 而不是选择。* 可能会有帮助。
更新
您的示例还有其他三个主要问题：
-
数据绑定到google-chart（即data =[[数据]]）所以当数据更改时图表会自动重绘，我们可以删除_drawChart完全。 -
_computeData（items。*，selected。*）过于激进，选择。 *将触发'selected.length'，'selected.splices'和选择的更改。而是使用_computeData（items，selected.length）。 -
google-chart本身似乎是马车。特别是，它自己的drawChart未设置为正确可重入。最明显的问题是，每次图表绘制时，它都会添加一个额外的选择侦听器（这会导致在您的应用程序中激发乘以图表选择事件）。如果您要提交错误，我会欣赏 code> google-chart 并链接回此SO。 ：）
这是一个修改过的版本，我修补了 google-chart.drawChart ，解决了其他两个主要问题，并做了各种小修理。
<！DOCTYPE HTML>< HEAD> < meta charset =utf-8> < base href =https://polygit.org/components/> < script src =webcomponentsjs / webcomponents-lite.min.js>< / script> < link href =polymer / polymer.html =import> < link href =google-chart / google-chart.html =import> < /头><身体GT; < dom-module id =x-element> <模板> <风格>谷歌图表{宽度：100％; }< / style> <峰; br><峰; br><峰; br><峰; br> < button on-tap =_ show>显示值< / button> < button on-tap =clearAll>全部清除< / button> < button on-tap =selectAll>选择全部< / button> < DIV> [选定〕25; / DIV> < google-chart id =geocharttype =geooptions =[[options]]data =[[data]]on-google-chart-select =_ onGoogleChartSelect> < /谷歌图表> < /模板> <脚本> （function（）{// monkey-patching google-chart var gcp = Object.getPrototypeOf（document.createElement（'google-chart'））; gcp.drawChart = function（）{if（this._canDraw）{if（！ this.options）{this.options = {};} if（！this._chartObject）{var chartClass = this._chartTypes [this.type]; if（chartClass）{this._chartObject = new chartClass（this。$。chartdiv ）; google.visualization.events.addOneTimeListener（this._chartObject，'ready'，function（）{this.fire（'google-chart-render'）;} .bind（this））; google.visualization.events.addListener （this._chartObject，'select'，function（）{this.selection = this._chartObject.getSelection（）; this.fire（'google-chart-select'，{selection：this.selection}）; } .bind（本））; if（this._chartObject.setSelection）{this._chartObject.setSelection（this.selection）; if（this._chartObject）{this._chartObject.draw（this._dataTable，this.options）; } else {this。$。chartdiv.innerHTML ='Undefined chart type'; }}; Polymer（{is：'x-element'，properties：{items：{type：Array，value：function（）{return ['Alabama'，'Alaska'，'Arizona'，'Arkansas'，'California'，' Colorado'，'Connecticut'，'Delaware'，'Florida'，'Georgia'，'Hawaii'，'Idaho'，'Illinois'，'Indiana'，'Iowa'，'Kansas'，'Kentucky'，'Louisiana' ，缅因州，马里兰州，马萨诸塞州，密歇根州，明尼苏达州，密西西比州，密苏里州，蒙大拿州，内布拉斯加州，内华达州，新罕布什尔州，新泽西州 ，新墨西哥州，纽约州，北卡罗来纳州，北达科他州，俄亥俄州，俄克拉荷马州，俄勒冈州，宾夕法尼亚州，罗德岛，南卡罗来纳州，南达科他州 '，'田纳西'，'得克萨斯'，'犹他州'，'佛蒙特'，'弗吉尼亚'，'华盛顿'，'西弗吉尼亚'，'威斯康辛州'，'怀俄明州'，... .sort（）; }，}，color：{type：String，//'＃455A64'value：'blue'}，options：{type：Object，computed：'_ countOptions（color）'，}，selected：{type：Array，value ：function（）{return [];数据：{类型：数组，计算：'_computeData（items，selected.length）'}，}，_ countOptions：function（）{return {region：'US'，displayMode：'regions'，resolution：'provinces '，legend：'none'，defaultColor：'white'，colorAxis：{colors：['＃E0E0E0'，this.color]，minValue：0，maxValue：1，}}}，//在select event，compute'选中'_onGoogleChartSelect：function（e）{console.log（'_ onGoogleChartSelect：'，e.detail）var string = e.path [0] .textContent.split（'Select'）[0] .trim（），//例如'Ohio'selected = this.selected，//所选项目数组index = selected.indexOf（string）; //如果'string'不在'selected'数组中，请添加它;否则删除它if（index === -1）{this.push（'selected'，string）; } else {this.splice（'selected'，index，1）; } //每个观察者console.log（'_ select：'，this.selected）的下一步应该是'_computeData'; }，//'items'填充或'selected'更改后，计算'data'_computeData：function（items，selectedInfo）{console.log（'_ computeData'）; var data = []，selected = this.selected，i = items.length; while（i--）{data.unshift（[items [i]，selected.indexOf（items [i]）> -1？1：0]）; } data.unshift（['State'，'Select']）;返回数据; }，clearAll：function（）{this.set（'selected'，[]）; }，selectAll：function（）{this.set（'selected'，this.items）; }，_ show：function（）{console.log（'items：'+ this.items）; console.log（'selected：'+ this.selected）; console.log（'data：'+ this.data）; }，}）; }）（）; < /脚本> < / DOM模块> < x-element color =redselected ='[Colorado，South Dakota]'>< / x-element>< / body>< / html>
HTH
随机额外的东西：
var _this = this;
setTimeout（function（）{
_this._drawChart（）;
} .bind（_this），100）
您需要 捕获的值（ _this ）或使用 bind ，但两者都没有意义。
setTimeout（function（）{
this._drawChart（）;
} .bind（this），100）
......就够了。
Ultimately, I want to select individual states from this geochart. But this question is limited to getting the observer labeled _computeData to fire in response to mutating the array of selected states.
Reproduce the problem with the following steps:
- Open this jsBin.
- Clear the console.
- Select the state of Texas.
Note the console reads:
You selected: Colorado,South Dakota,Texas
which is expected per this line:
console.log('You selected: ' + this.selected); // Logs properly
However, I expect the console to also read:
selected
per this line:
_computeData: function() {
console.log('selected'); // Does not log properly; function not called?
...
which should be called by the following set of observers.
http://jsbin.com/wuqugigeha/1/edit?html,console,output...
observers: [
'_computeData(items.*, selected.*)',
'_dataChanged(data.*)',
],
...
Question
What's going on here? Why isn't the observer calling the _computeData method? What can be done to get the method to fire after mutating the selected array?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="google-chart/google-chart.html" rel="import"> </head>
<body>
<dom-module id="x-element"> <template>
<style>
google-chart {
width: 100%;
}
</style>
<br><br><br><br>
<button on-tap="_show">Show Values</button>
<button on-tap="clearAll">Clear All</button>
<button on-tap="selectAll">Select All</button>
<div>[[selected]]</div>
<google-chart
id="geochart"
type="geo"
options="[[options]]"
data="[[data]]"
xon-google-chart-select="_onGoogleChartSelect">
</google-chart>
</template>
<script>
(function() {
Polymer({
is: 'x-element',
properties: {
items: {
type: Array,
value: function() {
return [ 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming', ].sort();
},
},
color: {
type: String, // '#455A64'
value: function() {
return 'blue';
}
},
options: {
type: Object,
notify: true,
reflectToAttribute: true,
computed: '_computeOptions(color)',
},
selected: {
type: Array,
notify: true,
reflectToAttribute: true,
value: function() {
return [];
},
//observer: '_computeData', // Unsuccessfully tried this
},
data: {
type: Array,
notify: true,
reflectToAttribute: true,
//computed: '_computeData(items.*, selected.*)', // Unsuccessfully tried this
},
},
observers: [
'_computeData(items.*, selected.*)',
'_dataChanged(data.*)',
],
// Bind select event listener to chart
ready: function() {
var _this = this;
this.$.geochart.addEventListener('google-chart-select', function(e) {
this._onGoogleChartSelect(e);
}.bind(_this));
},
_computeOptions: function() {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: 'white',
colorAxis: {
colors: ['#E0E0E0', this.color],
minValue: 0,
maxValue: 1,
}
}
},
// On select event, compute 'selected'
_onGoogleChartSelect: function(e) {
var string = e.path[0].textContent.split('Select')[0].trim(), // e.g. 'Ohio'
selected = this.selected, // Array of selected items
index = selected.indexOf(string);
// If 'string' is not in 'selected' array, add it; else delete it
if (index === -1) {
selected.push(string);
selected.sort();
} else {
selected.splice(index, 1);
}
this.set('selected', selected);
console.log('You selected: ' + this.selected); // Logs properly
// Next step should be '_computeData' per observers
},
// After 'items' populates or 'selected' changes, compute 'data'
_computeData: function() {
console.log('selected'); // Does not log properly; function not called?
var data = [],
items = this.items,
selected = this.selected,
i = items.length;
while (i--) {
data.unshift([items[i], selected.indexOf(items[i]) > -1 ? 1 : 0]);
}
data.unshift(['State', 'Select']);
this.set('data', data);
},
// After 'data' changes, redraw chart
// Add delay to avoid 'google not defined' error
_dataChanged: function() {
var _this = this;
setTimeout(function() {
_this._drawChart();
}.bind(_this), 100)
},
// After delay, draw chart
_drawChart: function() {
var data = this.data,
dataTable = this.$.geochart._createDataTable(data);
console.log(dataTable);
this.$.geochart._chartObject.draw(dataTable, this.options);
},
clearAll: function() {
this.set('selected', []);
},
selectAll: function() {
this.set('selected', this.items);
},
_show: function() {
console.log('items: ' + this.items);
console.log('selected: ' + this.selected);
console.log('data: ' + this.data);
},
});
})();
</script>
</dom-module>
<x-element color="red" selected='["Colorado", "South Dakota"]'></x-element>
</body>
</html>
解决方案
Your problem is here:
if (index === -1) {
selected.push(string);
selected.sort();
} else {
selected.splice(index, 1);
}
this.set('selected', selected);
Polymer's data-handling methods like set allow you to give Polymer specific information about how your data is changing, allowing Polymer to make very fast DOM updates.
In this case, you are doing work where Polymer cannot see it (i.e. the array manipulations), and then asking set to figure out what happened. However, when you call this.set('selected', selected);, Polymer sees that the identity of selected hasn't changed (that is, it's the same Array object as before) and it simply stops processing. (Fwiw, this is a common problem, so we are considering a modification that will go ahead and examine the array anyway.)
The solution is two-fold:
1) In the case where you are sorting the array, create a fresh array reference to for set via slice() :
if (index === -1) {
selected.push(string);
selected.sort();
this.set('selected', selected.slice());
2) In the case where you are simply splicing, use the splice helper function :
} else {
this.splice('selected', index, 1);
}
Ideally you avoid sorting your array, then you can use this.push directly.
Note: with these changes _computeData is being called, but now it's being called way too many times. Partly this is due to observing selected.* which will fire for selected, selected.length, and selected.splices. Observing selected.length instead of selected.* might help.
UPDATE
There were three other major problems with your example:
datais bound to to thegoogle-chart(i.e.data="[[data]]") so the chart will redraw itself whendatachanges and we can remove_drawChartcompletely._computeData(items.*, selected.*)is too aggressive, asselected.*will fire for changes in 'selected.length', 'selected.splices', andselected. Instead use_computeData(items, selected.length).google-chartitself appears to be buggy. In particular, it's owndrawChartis not set up to be properly re-entrant. The most obvious problem is that every time the chart draws, it adds an additional selection listener (which causes multiplyingchart-selectevents to fire on your application). I would appreciate it if you would file a bug ongoogle-chartand link back to this SO. :)
Here is a modified version where I've monkey patched google-chart.drawChart, fixed the other two major problems, and made a variety of smaller repairs.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="google-chart/google-chart.html" rel="import"> </head>
<body>
<dom-module id="x-element"> <template>
<style>
google-chart {
width: 100%;
}
</style>
<br><br><br><br>
<button on-tap="_show">Show Values</button>
<button on-tap="clearAll">Clear All</button>
<button on-tap="selectAll">Select All</button>
<div>[[selected]]</div>
<google-chart
id="geochart"
type="geo"
options="[[options]]"
data="[[data]]"
on-google-chart-select="_onGoogleChartSelect">
</google-chart>
</template>
<script>
(function() {
// monkey-patching google-chart
var gcp = Object.getPrototypeOf(document.createElement('google-chart'));
gcp.drawChart = function() {
if (this._canDraw) {
if (!this.options) {
this.options = {};
}
if (!this._chartObject) {
var chartClass = this._chartTypes[this.type];
if (chartClass) {
this._chartObject = new chartClass(this.$.chartdiv);
google.visualization.events.addOneTimeListener(this._chartObject,
'ready', function() {
this.fire('google-chart-render');
}.bind(this));
google.visualization.events.addListener(this._chartObject,
'select', function() {
this.selection = this._chartObject.getSelection();
this.fire('google-chart-select', { selection: this.selection });
}.bind(this));
if (this._chartObject.setSelection){
this._chartObject.setSelection(this.selection);
}
}
}
if (this._chartObject) {
this._chartObject.draw(this._dataTable, this.options);
} else {
this.$.chartdiv.innerHTML = 'Undefined chart type';
}
}
};
Polymer({
is: 'x-element',
properties: {
items: {
type: Array,
value: function() {
return [ 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming', ].sort();
},
},
color: {
type: String, // '#455A64'
value: 'blue'
},
options: {
type: Object,
computed: '_computeOptions(color)',
},
selected: {
type: Array,
value: function() {
return [];
}
},
data: {
type: Array,
computed: '_computeData(items, selected.length)'
},
},
_computeOptions: function() {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: 'white',
colorAxis: {
colors: ['#E0E0E0', this.color],
minValue: 0,
maxValue: 1,
}
}
},
// On select event, compute 'selected'
_onGoogleChartSelect: function(e) {
console.log('_onGoogleChartSelect: ', e.detail)
var string = e.path[0].textContent.split('Select')[0].trim(), // e.g. 'Ohio'
selected = this.selected, // Array of selected items
index = selected.indexOf(string);
// If 'string' is not in 'selected' array, add it; else delete it
if (index === -1) {
this.push('selected', string);
} else {
this.splice('selected', index, 1);
}
// Next step should be '_computeData' per observers
console.log('_select:', this.selected);
},
// After 'items' populates or 'selected' changes, compute 'data'
_computeData: function(items, selectedInfo) {
console.log('_computeData');
var data = [],
selected = this.selected,
i = items.length;
while (i--) {
data.unshift([items[i], selected.indexOf(items[i]) > -1 ? 1 : 0]);
}
data.unshift(['State', 'Select']);
return data;
},
clearAll: function() {
this.set('selected', []);
},
selectAll: function() {
this.set('selected', this.items);
},
_show: function() {
console.log('items: ' + this.items);
console.log('selected: ' + this.selected);
console.log('data: ' + this.data);
},
});
})();
</script>
</dom-module>
<x-element color="red" selected='["Colorado", "South Dakota"]'></x-element>
</body>
</html>
HTH
Random extra stuff:
var _this = this;
setTimeout(function() {
_this._drawChart();
}.bind(_this), 100)
You need to either capture the value of this (_this) or use bind, but it doesn't make sense to do both.
setTimeout(function() {
this._drawChart();
}.bind(this), 100)
... is enough.
这篇关于Polymer 1.x：观察员的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
