删除子元素';来自Polymer js的s属性
我有一个自定义元素,其中包括一个核心输入和一个纸按钮。 创建元素时,输入被禁用,我想在点击按钮时启用它。 我尝试了几种方法,但无法访问输入的属性删除子元素';来自Polymer js的s属性,polymer,custom-element,Polymer,Custom Element,我有一个自定义元素,其中包括一个核心输入和一个纸按钮。 创建元素时,输入被禁用,我想在点击按钮时启用它。 我尝试了几种方法,但无法访问输入的属性 <paper-input-decorator label="Nombre de usuario" floatingLabel> <input id="usernameinput" value="{{UserName}}" is="core-input" disabled /> </paper-input-dec
<paper-input-decorator label="Nombre de usuario" floatingLabel>
<input id="usernameinput" value="{{UserName}}" is="core-input" disabled />
</paper-input-decorator>
<paper-button raised id="edprobutton" on-tap="{{edbutTapped}}">EDITAR</paper-button>
编辑
所以,我了解到问题是我的用户名输入元素在重复模板中,这对我尝试做的事情不好。现在我正试图将一个json对象绑定到我的元素,但目前为止运气不佳
我现在所拥有的:
在我的索引页中:
<profile-page id="profpage" isProfile="true" entity="{{profEntity}}"></profile-page>
<script>
$(document).ready(function () {
var maintemplate = document.querySelector('#fulltemplate');
$.getJSON('api/userProfile.json', function (data) {
var jsonString = JSON.stringify(data);
alert(jsonString);
maintemplate.profEntity = jsonString;
});
}
</script>
我想在更改元素的实体属性后,我需要以某种方式“更新”元素吗 试试下面的方法
<script>
Polymer({
edbutTapped: function () {
this.$.usernameinput.disabled = false;
}
});
</script>
聚合物({
edbutTapped:函数(){
此.$.usernameinput.disabled=false;
}
});
this.$允许您访问元素中定义的控件,usernameinput是您分配给输入的id
这可以位于您正在定义的元素的结束标记下方。为“禁用”
因此,这将是正确的使用方法:
<input id="usernameinput" value="{{UserName}}" is="core-input" disabled?="{{isDisabled}}" />
好的,这将是一个很长的答案(因此我不把它作为我原始答案的编辑)。我刚刚做了一些功能相同的事情 首先是这个代码
$.getJSON('api/userProfile.json', function (data) {
var jsonString = JSON.stringify(data);
alert(jsonString);
maintemplate.profEntity = jsonString;
});
Polymer有一个名为CoreAJAX的控件——顾名思义,它是一个ajax调用。另一件非常好的事情是,它可以在URL更改时执行。这是我得到的项目代码
<core-ajax id="ajax"
auto=true
method="POST"
url="/RoutingMapHandler.php?Command=retrieve&Id=all"
response="{{response}}"
handleas="json"
on-core-error="{{handleError}}"
on-core-response="{{handleResponse}}">
</core-ajax>
这将调用一个名为edbutTapped的函数。接受我之前给你的密码
<script>
Polymer({
edbutTapped: function () {
this.$.usernameinput.disabled = false;
}
});
</script>
这是在Polymer({line.I)之后插入的。我看不到在您修订的代码中定义了usernameinput,但我假设您没有发布它,它是在元素中定义的
您应该在工作,但请记住保持大小写的一致性,老实说,我没有——聚合物的某些部分是区分大小写的——这一直让我感到惊讶:)我已经尝试过了,错误显示“无法获取未定义或空引用的“禁用”属性”我已经在答案中添加了更多的细节-试试看。如果没有处理它,可能需要查看更多的代码。听起来好像在调用hander时没有定义usernameinput。抱歉,我现在意识到它在重复模板中。但不应该,因为它只有一个对象,但来自json文件,我不知道如何定义只绑定一个对象,不使用重复。我可以在创建的元素上创建一个用户对象,但如何从JSON中提取它,更重要的是,如果绑定不是重复的模板,或者需要在模板之外才能工作,我是否能够访问userinput的属性?您是否有理由将其放入重复模板?如果您只需要一个副本,请将其放在重复模板之外。否则,您的问题与我刚刚发布的问题相同,我正在尝试为重复模板内的对象创建事件处理程序-尽管在我的示例中,有“n”个条目,其中n是数据库中的记录数。也尝试了,但没有成功,但我认为问题是,它在一个重复的模板中,正如我在上面的评论中所写的,谢谢你的详细回答,我试着这样做,核心ajax的响应似乎是空的,没有绘制任何配置文件页面。另外,我真的需要重复的模板吗?我的意思是,不是一个对象数组,而是一个。即使我可以做到这一点,我关心的是w我写的hat是我实际拥有的一个小例子,这意味着一个概要文件有更多的属性,而不仅仅是这三个属性,因此我更希望能够发送整个对象并在元素中处理它。这不可能吗?您可以使用core ajax的on-core response属性。将以下内容添加到core ajax on-core response=”{{handleResponse}。然后处理程序的定义如下:自定义元素的脚本。handleResponse:function(event,detail,sender){},detail应该包含结果-如果您使用以下警报(JSON.stringify(detail));这将以JSON字符串的形式显示详细信息-应该包含由JSON组成的对象。
//first disable the field, can be done in ready callback:
ready: function () {
this.isDisabled = 'true';
}
//set idDisabled to 'false' i.e. enable the input
edbutTapped: function () {
this.isDisabled = 'false';
},
$.getJSON('api/userProfile.json', function (data) {
var jsonString = JSON.stringify(data);
alert(jsonString);
maintemplate.profEntity = jsonString;
});
<core-ajax id="ajax"
auto=true
method="POST"
url="/RoutingMapHandler.php?Command=retrieve&Id=all"
response="{{response}}"
handleas="json"
on-core-error="{{handleError}}"
on-core-response="{{handleResponse}}">
</core-ajax>
<core-ajax id="ajax"
auto=true
method="POST"
url="/api/userProfile.json"
response="{{jsonString}}"
handleas="json"
on-core-error="{{handleError}}" >
</core-ajax>
<polymer-element name="profile-page" attributes="isprofile entity">
<polymer-element name="profile-page" attributes="isprofile name companyposition OrgUnitName">
<script>
Polymer({
name: "",
companyposition: "",
OrgUnitName: ""
});
</script>
<template repeat="{{m in response.data}}">
<map-list-element mapname="{{m.mapName}}" recordid="{{m.Id}}" on-show-settings="{{showSettings}}">
</map-list-element>
</template>
<template repeat="{{u in jsonString}}">
<profile-page name="{{u.name}} companyposition="{{u.companyposition}}" OrgUnitName="{{u.OrgUnitName}}">
</profile-page>
</template>
on-tap="{{edbutTapped}}"
<script>
Polymer({
edbutTapped: function () {
this.$.usernameinput.disabled = false;
}
});
</script>
created: function() {
this.$.usernameinput.disabled = true;
},