小编Pat*_*ert的帖子

我目前正在使用OpenLayers,并且有大量数据可以绘制到矢量图层(大于100000个矢量).

我现在正试图将所有这些向量放入JavaScript哈希映射中以分析性能.我想知道JavaScript中的哈希映射是如何实现的,它是一个真正的哈希函数还是只是一个使用简单数据结构和搜索算法的包装函数？

目标:一个封闭的小部件

假设我是FakeBook™的朋友小部件的开发者.我为网站所有者提供了一个小部件,可以将这样的个性化消息添加到他们的页面:

你的朋友Michael,Anna和Shirley喜欢这个网页!

第一种方法:创建的脚本 span

天真地,我创建了一个脚本,将这些信息span放在网站上.但是,ExampleSite的所有者现在可以通过简单的DOM操作访问您朋友的名字!
这是一个很大的隐私/安全问题.

第二种方法: iframe

我不希望ExampleSite访问他们朋友的名字.所以相反,我让网站所有者添加小部件iframe:

<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>

这样做,因为ExampleSite的所有者无法刮掉内容iframe.然而,整个iframe事情相当丑陋,因为它没有融入网站的样式,而一个span.

期望的方法:Shadow DOM

在昨天阅读Shadow Dom时,我想知道这是否可以解决这两个问题.这将允许我有一个脚本,创建一个span原始网站无法访问:

var host = document.querySelector('#friends');
var root = host.webkitCreateShadowRoot();
root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!';

但是,Shadow DOM是否会将其内容隐藏在周围的页面中？
这里的假设是除了我的脚本之外没有人可以访问root,但这是正确的吗？

在影子DOM规范毕竟说,它提供的功能封装,但其实我是想相信封装.虽然组件模型用例实际列出了这个用例,但我不确定Shadow DOM是否实现了nesessary confinement属性.

我目前正在寻找一种解决方案来选择(或突出显示)OpenLayers.Layer.Vector中的向量.

我已经构建了一个简单的网格表,用户可以在其中选择一个向量(以WKT格式的字符串给出),该向量应突出显示图层上的相应向量.当用户访问网站时,网格表中的所有向量都将绘制到地图上的矢量图层.

我发现我需要OpenLayers.Control.ModifyFeature的selectFeature(feature)函数或者OpenLayers.Control.SelectFeature(参见dev.openlayers.org/apidocs/files/OpenLayers/Control/SelectFeature-js.html的select(功能(可能不存在或不再存在？).请参阅邮件列表中的帖子:osgeo-org.1803224.n2.nabble.com/Programatically-Select-a-Feature-tt2192485.html# a2193928更多信息.

我尝试了以下但没有成功,所以我希望有人可以抓住这些代码行,并可以向我展示一个有效的代码片段;-)

// ... some initializing code
this.vlayer = new OpenLayers.Layer.Vector("VectorLayer");  // VectorLayer

// some controls
this.openLayerControlPoint = new OpenLayers.Control.DrawFeature(this.vlayer, OpenLayers.Handler.Point);
this.openLayerControlPolygon = new OpenLayers.Control.DrawFeature(this.vlayer, OpenLayers.Handler.Polygon);
this.openLayerControlModify = new OpenLayers.Control.ModifyFeature(this.vlayer, {
  mode: OpenLayers.Control.ModifyFeature.RESHAPE | OpenLayers.Control.ModifyFeature.DRAG,
  standalone: false
});

// just deactivate to make sure everything is really deactivated
this.openLayerControlPoint.deactivate();
this.openLayerControlPolygon.deactivate();
this.openLayerControlModify.deactivate();

// add the just created layer to the map
this.map.addLayer(this.vlayer);

// add all (deactivated) controls to the map
this.map.addControl(this.openLayerControlPoint);
this.map.addControl(this.openLayerControlPolygon);
this.map.addControl(this.openLayerControlModify);

后来的代码: …

我试图找到一些提示,我应该搜索这个主题,但我找不到任何东西 - 我花了很多时间在这上面.

我还试图从OpenLayers地图中获取当前显示的视口中的当前坐标,以仅添加当前视口的当前边界框中的这些矢量.

我目前正在测试自定义元素的性能,因此我无需注册以前注册的元素.我找不到任何相关的东西.

我认为可能需要这样做,但在我没有更详细地研究这个问题之前,我不会做任何假设.

我知道我可以刷新页面,但这不是重点.

到目前为止,我已经完成了以原生的,规范的方式注册元素:

document.registerElement('my-element', {
    prototype: Object.create(HTMLElement.prototype)
});

我想在rails自动生成的错误消息中翻译模型的名称.

当我尝试为用户创建新帐户时,我在rails应用程序中收到以下视图错误.

AccountSmall is not valid

这是正确的,因为应该存在新帐户的名称.

我现在如何AccountSmall通过我的yml语言环境翻译名称？

我试了这个没有运气:

de:
  # ...
  activerecord:
    models:
      AccountSmall: "Konto"

提前谢谢了!

我试图把a <core-list>放入一个<core-header-panel>但是核心列表不会被渲染,直到我给它一个高度.

所以,我的示例代码确实有一个非常愚蠢的黑客工作,但我认为必须有更好的方式满足核心列表到页面中.

结构如下:

这是我的代码:

JSFiddle: http ://jsfiddle.net/gu0g8kt3/2/

HTML

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">

<core-drawer-panel>
  <core-header-panel drawer>
    <core-image style="width:256px; height:170px; background-color: lightgray;"
                sizing="cover" preload fade src="http://lorempixel.com/256/170/abstract/"></core-image>

      <core-menu selectedAttribute="">
      <paper-item>
        <core-icon icon="assignment"></core-icon>
        <div>Option #1</div>
      </paper-item>
      <paper-item>
        <core-icon icon="account-circle"></core-icon>
        <div>Option #2</div>
      </paper-item>
    </core-menu>
  </core-header-panel>

  <core-header-panel id="hPanel" main>
    <core-toolbar id="toolbar">
      <paper-menu-button icon="menu" core-drawer-toggle></paper-menu-button>
      <span flex>This is my app!</span>
    </core-toolbar>

    <div class="content">


      <!-- here is the problem -->        
      <core-list id="list" height="120">
        <template>
            <div class="row …