小编Ben*_*mas的帖子
使用聚合物ajax响应
我有以下聚合物元素:
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="task-list-app">
<style>
:host {
}
</style>
<template>
<iron-ajax auto url="../tasks.json" handle-as="json" on-response="handleResponse"></iron-ajax>
<template is="dom-repeater" items="{{todos}}">
<span>hello</span>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "task-list-app",
created: function () {
this.todos = [];
},
handleResponse: function (data) {
this.todos = data.detail.response;
}
});
</script>
我通过执行以下操作在我的index.html中调用它:
<task-list-app></task-list-app>
我期待对于todo数组中返回的每个对象,<span>都会打印出来.但是,当我运行应用程序时,我在控制台中获得以下输出:
未捕获的TypeError:无法读取未定义的属性'todos'
在 polymer.html line 1001
我不确定这里发生了什么以及如何引用从ajax响应中收到的数据.
推荐指数
解决办法
查看次数
聚合物,如何将page.js中的url参数转换为聚合物元素？
我想制作单页应用程序.当我去路径时localhost/person-info/101,如何使用page.js将URL参数转换为Polymer元素？
person-info在使用neon-animated-page更改页面之前,我必须使用这些参数来选择或更改元素中的数据
内容app.js:
window.addEventListener('WebComponentsReady', function () {
var app = document.querySelector('#app');
page('/', home);
page('/person-info/:user', showPersonInfo);
page({
hashbang: true
});
function home() {
app.route = 'index';
console.log("app route" + app.route);
console.log("home");
}
function showPersonInfo(data) {
console.log(data);
console.log(data.params.user);
app.params = data.params;
app.route = 'person-info';
}
});
还有我的Polymer元素 person-info.html
<link rel="import" href="bower_components/iron-list/iron-list.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<script type="text/javascript" src="bower_components/jquery-2.1.4.min/index.js"></script>
<script src="js/app.js"></script>
<dom-module id="person-info">
<style>
:host {
display: block;
font-family: sans-serif;
@apply(--layout-fit); …推荐指数
解决办法
查看次数
JavaScript取代所有忽略区分大小写
我试图替换字符串中的值和另一个值的所有出现
到目前为止我所拥有的是什么
var result = "Cooker Works"
var searchterm = "cooker wor";
searchterm.split(" ").forEach(function (item) {
result = result.replace(new RegExp(item, 'g'), "<strong>" + item + "</strong>");
});
console.log(result)我想要的结果应该是这样的
result = "<strong>Cooker</strong> <strong>Wor</strong>s";
我在处理案件时遇到问题,有什么方法可以忽略这一点,但仍然得到我追求的结果
推荐指数
解决办法
查看次数
访问附加的dom-repeat内的元素
我想访问一个内部的元素dom-repeat.在这里,el返回空数组:
<dom-module id="child-element">
<template>
<div id="ida">
<ul>
<template is="dom-repeat" items="{{user}}" id="items">
<li class = "classa">{{item.name}}</li>
</template>
</ul>
</div>
</template>
<script>
ChildElement = Polymer({
is: 'child-element',
factoryImpl(users) {
this.user = users;
},
properties: {
user: {
type: Array
}
},
attached: function() {
var el = Polymer.dom(this.root).querySelectorAll("#ida .classa");
console.log("el",el);
}
});
</script>
</dom-module>
如何dom-repeat从Polymer中的其他位置访问动态创建的元素？
这是完整版的链接.
推荐指数
解决办法
查看次数
香草网状组件结构
我正在研究构建香草网络组件.我以前使用过Polymer,你可以将模板,样式和JavaScript放在一个文件中.如果可能的话,我希望用'vanilla'网页组件实现这一目标,但无法解决问题.我从这里获取代码并将其添加到我正在使用的文件中,如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Component test</title>
<link rel="import" href="x-foo-from-template.html">
</head>
<body>
<x-foo-from-template></x-foo-from-template>
</body>
</html>
这失败了,因为当我们尝试选择模板时它不存在,因为此时模板不在DOM中(对吗？).
有没有办法实现这个目标？我个人更喜欢这种方法在JavaScript中使用创建HTML document.createElement.
javascript web-component html5-template custom-element html5-import
推荐指数
解决办法
查看次数
如何从 textarea 元素中删除调整大小的角？
我正在创建一个简单的文本编辑器 - 文本输入是一个 textarea 元素。我想删除用于更改框大小的两行（实际上，如果可能，我想修复框大小，使其无法更改）。
这就是我要说的：
编辑：这是代码：
// HTML
<textarea id="canvas" placeholder="Write something..."></textarea>
// CSS
#canvas {
border: 1px dashed #999;
background: transparent;
width: 500px;
height: 400px;
margin: 0 auto;
padding: 5px;
font-size: 20px;
}
推荐指数
解决办法
查看次数
JavaScript计算错误超过100
我有一个函数,它检查数组(数量)与数组 quantity range: price
var data = {
"1 - 4": " $4.25 ",
"10 - 24": " $3.25 ",
"25 - 49": " $3.04 ",
"5 - 9": " $3.51 ",
"50+": " $2.84 "
}
function get_price(arr, val) {
var price = Object.keys(arr).reduce((a, c) => {
var s = c.trim();
if (/\d+\-\d+/.test(s)) {
var range = s.split("-");
if (val >= parseInt(range[0]) && val <= parseInt(range[1])) {
a = arr[c];
}
} else {
s = s.replace(/\D/g, "");
if …推荐指数
解决办法
查看次数