jjzjj

javascript - Polymer 1.0 中具有绑定(bind)的文本环绕元素

coder 2024-05-14 原文

我已经使用 Polymer 创建了一个自定义 Web 组件，它包装文本并稍微改变它(在这个概念证明中转换为大写)。

元素本身可以与静态内容一起工作。但是，动态绑定(bind)内容时，组件无法显示内容。

例如:

<my-wrapper>Hello, World!</my-wrapper> <!-- Works -->
<my-wrapper>[[someText]]</my-wrapper> <!-- Doesn't work -->

目前我正在使用 observeNodes ，它设法触发初始文本转换，但未能触发后续更改。

我当前的原型(prototype)定义为:

<dom-module id="my-wrapper">
  <template>
    <span id="placeholder"></span>
  </template>
  <script>
    Polymer({
      is: 'my-wrapper',
      ready: function() {
        var self = this;
        Polymer.dom(Polymer.dom(this)).observeNodes(function(info) {
          self.$.placeholder.textContent = info.target.textContent.toUpperCase();
        });
        /*var mutationObserver = new MutationObserver(function(e) {
          console.log(e);
        });
        mutationObserver.observe(this.root, {characterData: true, childList: true});*/
      },
    });
  </script>
</dom-module>

可以在这里找到针对上述问题的有效 JSBin:http://jsbin.com/jumewuzuho/1/edit?html,console,output .

关于如何捕捉(light DOM)内容的变化，以便我可以重新转换文本，有什么建议吗？

如您在注释代码块中所见，我已经尝试使用 MutationObserver，但无法创建工作原型(prototype)。我的猜测是我没有使用正确的节点(在我的例子中是 this.root)。

最佳答案

我认为 ObserveNodes(或 MutationObserver)不是解决此问题的最佳方法。 ObserveNodes 跟踪子节点 何时添加到您的元素中以及从中移除。

在您的例子中，DOM 节点没有被添加或删除，只是元素的内部文本发生了变化。 ObserveNodes 不会获取这些更改。

我会推荐另一种方法，在我看来，它更符合聚合物的做事方式，使用 content 标签:

To support composition of an element's light DOM with its local DOM, Polymer supports the content element. The content element provides an insertion point at which an element's light DOM is combined with its local DOM

我会使用内容标签创建一个插入点，然后通过影子 DOM(文本转换:大写)设置样式:

<dom-module id="my-wrapper">
  <template>
    <style>
      :host {
        text-transform: uppercase;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'my-wrapper'
    });
  </script>
</dom-module>

关于javascript - Polymer 1.0 中具有绑定(bind)的文本环绕元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39097064/

环绕javascriptcodemy-wrapperltdata-bindingpolymer-1.0mutation-observers

有关javascript - Polymer 1.0 中具有绑定(bind)的文本环绕元素的更多相关文章

  1. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  2. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  3. ruby-on-rails - Rails 3.1 中具有相同形式的多个模型？ - 2

    我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型，每个模型都有许多Post。当用户创建新主题时，他们也应该创建第一个Post。但是，我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗？谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#

  4. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  5. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  6. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  7. ruby - 具有两个参数的 block - 2

    我从用户Hirolau那里找到了这段代码:defsum_to_n?(a,n)a.combination(2).find{|x,y|x+y==n}enda=[1,2,3,4,5]sum_to_n?(a,9)#=>[4,5]sum_to_n?(a,11)#=>nil我如何知道何时可以将两个参数发送到预定义方法(如find)？我不清楚，因为有时它不起作用。这是重新定义的东西吗？ 最佳答案 如果您查看Enumerable#find的文档，您会发现它只接受一个block参数。您可以将它发送两次的原因是因为Ruby可以方便地让您根据它的“并行赋

  8. ruby-on-rails - 在 RSpec 中，如何以任意顺序期望具有不同参数的多条消息？ - 2

    RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)

  9. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  10. ruby-on-rails - 具有同名的模块和类 - 2

    我有一个模块stat存在于目录结构中:lib/stat_creator/stat/在lib/stat_creator/stat.rb中，我在lib/stat_creator/stat/目录中有我需要的文件，以及:moduleStatCreatormoduleStatendend当我使用该模块时，我将这些类称为StatCreator::Stat::Foo.new现在我想要一个存在于应用程序中的根Stat类。我在app/models中制作了我的Stat类，并在routes.rb中进行了设置。但是，如果我转到Rails控制台并尝试在应用程序/模型中使用Stat类，例如:Stat.by_use

随机推荐