个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 Polymer 进行一些演示。这个在这里:
https://www.polymer-project.org/components/core-ajax/demo.html
有效的代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax this.</title>
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
</head>
<body>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</body>
</html>
效果很好。但我想将这个演示封装在一个名为“test-element.html”的 polymer 元素中，但它不起作用:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="test-element">
<template>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</template>
<script>
Polymer('test-element', {
});
</script>
</polymer-element>
当我使用该元素并在我的 index.html 中导入时，没有显示任何内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Playground</title>
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="test-element.html">
<link rel="import" href="ajax-feedback.html">
</head>
<body>
<style>
* {margin: 0; padding: 0;}
</style>
<h1>Hello World</h1>
<test-element></test-element>
<ajax-feedback></ajax-feedback>
</body>
</html>
请有人向我解释一下，为什么我不能将演示代码放在 polymer 元素中，然后将其重新导入到我的 index.html 中？
非常感谢。
乔治。
最佳答案
有两件事:document.querySelector() 在这里不起作用: polymer 元素使用影子 dom，这将隐藏 CSS 和 querySelector() 中的元素，而您已经通过艰难的方式做到了这一点。你不应该需要 <script>里面的标签 <template> ，并且您不需要对 JS 进行硬编码以将响应传送到将要使用的位置。
这是简单的方法:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">
<polymer-element name="test-element" attributes="q">
<template>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"{{q}}"}'
handleAs="json" response="{{response}}"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
</template>
<script>
Polymer({
response: null,
});
</script>
</polymer-element>
然后使用它:
<test-element q="chrome"></test-element>
关于javascript - 如何使用 polymer 元件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26263061/
26
4
0
我正在使用 Polymer 进行一些演示。这个在这里: https://www.polymer-project.org/components/core-ajax/demo.html 有效的代码如下所示
我试图了解 polymer 是否是为特定用例构建的——第三方网络组件。 我需要完成的是创建一个 Web 组件，它从调用者的页面获取图像 URL(元素上的属性是可以的)作为输入，并在 polymer 组
我想使用 Polymer.import( elements, callback ) 动态导入元素。如果元素已经导入，则永远不会调用回调，否则在加载元素时调用。 问题是:是否有一种标准的方法来确定是否加
这个问题在这里已经有了答案: CSS: Special Fluid Layout Problems (5 个答案) 关闭 3 年前。 我有以下测试代码可以使用: http://jsfiddle.ne
我正在尝试为我们的测试框架连接 Mocha/Chai/Karma。我几乎已经到达那里，使用 Polymer 单元测试指南作为基础。我想要更简单的东西，只需要一个 tests.js脚本并使用 Bower
如果我将 margin-top 放在第一个列表项 (LI) 上，那么 margin 在 ul 之外。 最后一项和 margin-bottom 也是一样的。但是 margin-left/margin r
我正在尝试绝对定位一个 ASP.NET 数据列表，该数据列表位于包含 TR 和 TD 元素的表格内 - 我水平显示 TR - 应用绝对定位仅显示最后一个 TD 元素。使用相对/静态显示整个 TD 元素
我是一名优秀的程序员,十分优秀！