jjzjj

javascript - polymer 点击事件未触发

coder 2024-07-21 原文

目前我正在尝试使用 Polymer。现在我有一个简单的页面，上面有一个纸按钮，但我无法为其注册点击事件。我试过这段代码:

<paper-button raisedButton 
              id="test"
              class="colored" 
              label="Click"
              link="http://twitter.com"
              on-click="{{ goLink }}">
</paper-button>

<script>
        Polymer('#test', {
            goLink: function(e) 
            {
                window.location.href = e.target.getAttribute('link');
            }
       });
</script>

点击事件没有被触发。代码有什么问题？第二个问题:我应该在代码中使用 on-click 还是 on-tab？

最佳答案

您不能通过简单地使用某个任意元素的 id 调用 Polymer() 函数来定义 Polymer 组件。要么你需要 create a Polymer element包含按钮和处理程序代码，如下所示:

<body unresolved>

  <polymer-element name="link-button">
    <template>
      <paper-button raisedButton id="test" class="colored"
        label="Click" link="http://twitter.com"
        on-click="{{ goLink }}">
      </paper-button>
    </template>
    <script>
      Polymer('link-button', {
        goLink: function(e) {
          window.location.href = e.target.getAttribute('link');
        }
      })
    </script>
  </polymer-element>

  <link-button></link-button>

</body>

或者您需要将按钮包装在 auto-binding template 中:

<body unresolved>

  <template id="bind" is="auto-binding">
    <paper-button raisedButton id="test" class="colored"
      label="Click" link="http://twitter.com"
      on-click="{{ goLink }}">
    </paper-button>
  </template>

  <script>
    var bind = document.querySelector('#bind');
    bind.goLink = function(e) {
      window.location.href = e.target.getAttribute('link');
    }
  </script>

</body>

在第一个版本中，如果将硬编码链接(可能还有一些其他值)转换为属性，则可以创建可重用的 link-button 元素。

顺便说一句。您可以使用“点击”或“点击”。当您用鼠标单击按钮时，会触发这两个事件。

编辑:

如果你想要的只是花哨的纸质按钮，你可以通过简单地向元素添加一个事件监听器而无需任何 Polymer 特定编程:

<paper-button raisedButton id="test" class="colored"
  label="Click" link="http://twitter.com">
</paper-button>

<script>
  document.querySelector('#test').addEventListener('click', function(e) {
    window.location.href = e.target.getAttribute('link');
  })
</script>

但我认为，如果您只关注 Polymer 的组件消费者端，您会错过它的很多功能(以及一般的 Web 组件)。

关于javascript - polymer 点击事件未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25226917/

javascriptpolymer34buttoncode

有关javascript - polymer 点击事件未触发的更多相关文章

  1. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  2. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  3. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  4. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  5. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  8. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  9. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  10. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

随机推荐