我使用Polymer .5作为html Web组件层,除此之外,我已经构建了一个模块化JS Core,用于pub-sub事件,基于Nicholas Zakas的设计和{ {3}}来自Andrew Burgess。
我知道在Polymer walkthrough中概述了实现此目的的其他方法。但是,我不喜欢核心信号,推荐的pub-sub方法,以及正确的JS Core和Sandbox。
我的问题是当我将Polymer定义中的Method作为特定事件的回调传递时。当引发一个事件并从Core调用该方法时,'这个'反映了绑定事件的列表,而不是Polymer元素中的方法和属性。这意味着我无法更新任何数据绑定变量,以有效地更新元素的DOM。
此代码已被删除,以显示反映问题的相关方法
<polymer-element name="product-panel"> <template>
<div id="product-panel">
<content>
<ul>
<template repeat="{{item in list}}">
<li id="{{item.id}}" data-unique-keyword="{{item.keywords}}" style="{{item.styleString}}" on-click="{{addToCart}}"><img src="/ptp/resources/img/{{item.imgFile}}">
<p>{{item.label}}</p></li>
</template>
</ul>
</content>
</div>
</template> <script>
Polymer('product-panel', {
ready : function() {
this.input = 'test-input';
this.list = [{id: '1', keywords: 'red', imgFile:'1.jpg', label:'First Item', style:{width:"120px"}, styleString:''},
{id: '2', keywords: 'blue', imgFile:'2.jpg', label:'Second Item', style:{}, styleString:''},
{id: '3', keywords: 'mobile', imgFile:'3.jpg', label:'Third Item', style:{}, styleString:''}];
this.name = 'panel';
this.sandbox = null;
CORE.create_module(this.name, function(sb, lns) {
if(lns){
lns.sandbox = sb;
}
return {
init : function() {
},
destroy : function() {
}};
}, this);
this.sandbox.listen({'perform-search' : this.searchPlain});
CORE.start(this.name, this);
},
searchPlain : function(query) {
for (; product = this.list[i++];) {
if (product.label.toLowerCase().indexOf(query.toLowerCase()) < 0) {
product.style.opacity = '0.2';
}
}
}
});
</script> </polymer-element>
</html>
值得注意的部分是sandbox.listen方法,它将searchPlain方法绑定到perform-search事件。我可以确认这个方法正在被正确回调,但它无权访问数据绑定this.list,因此它无法更新值。
如果我检查这个&#39;通过Chrome 42中的Dev Tools,我看到它可以访问绑定事件列表及其方法。这让我相信这正在进行回调的核心范围。
预计将Polymer方法作为回调传递会导致它失去本地范围吗?
如果有另外一种方法将这些方法绑定到具有JS Core的事件,或者是一种能够从回调方法访问本地元素变量的解决方法吗?