从聚合物js中删除子元素的属性

Question

我有一个自定义元素，其中包含一个核心输入和一个纸张按钮。 创建元素时，输入被禁用，并且我想在点击按钮时启用它。 我尝试了几种方法，无法访问输入的属性。

<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> 

我应该写在

edbutTapped: function() { 

     }, 

编辑

所以，我明白了，问题是，我的用户名输入元素是一个重复的模板里面，这是很糟糕为了我想要做的事情。现在我试图将一个单一的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> 

在我的元素的网页：

<polymer-element name="profile-page" attributes="isprofile entity"> 
    <template> 
     <style> 
      [...] 
     </style> 
     <div flex vertical layout> 
      <core-label class="namepro">{{entity.Name}}</core-label> 
      <core-label class="subpro">{{entity.CompanyPosition}}</core-label> 
      <core-label class="subpro">{{entity.OrgUnitName}}</core-label> 
     </div> 
    </template> 
</polymer-element> 

我的JSON是这样的：

{"Name": "Sara Alvarez","CompanyPosition": "Desarrollo","OrgUnitName": "N-Adviser"} 

我想asuming我需要在更改其实体属性后以某种方式“更新”我的元素？

Answer 1

请尝试以下

<script> 
    Polymer({ 
     edbutTapped: function() { 
       this.$.usernameinput.disabled = false; 
     } 
    }); 
</script> 

的这一点。$允许您访问在元素定义的控制和usernameinput是你分配给输入的ID。

这可以低于您定义的元素的结束标记。

Answer 2

'disabled'是conditional-attribute。

因此，这将是正确的使用它：

<input id="usernameinput" value="{{UserName}}" is="core-input" disabled?="{{isDisabled}}" /> 

在原型：这将是一个漫长的答案（因此我为什么不进入这个作为

//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'; 
     }, 

Answer 3

OK编辑我的原始答案）。我刚刚做了一些功能相同的东西。

第一件事是这段代码;

$.getJSON('api/userProfile.json', function (data) { 
     var jsonString = JSON.stringify(data); 
     alert(jsonString); 
     maintemplate.profEntity = jsonString; 
    }); 

聚合物有一个名为core-ajax的控件 - 因为它的名字暗示会产生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> 

auto是在URL更改时触发它启动的位。来自聚合物文件的auto说明如下;

将auto设置为true时，元素会在url，params或body属性发生更改时执行请求。

您不需要on-core-response，但on-core-error可能更有用。对于我的代码响应包含返回的JSON。

因此，对于你的代码 - 这将是这样的

<core-ajax id="ajax" 
       auto=true 
       method="POST" 
       url="/api/userProfile.json" 
       response="{{jsonString}}" 
       handleas="json" 
       on-core-error="{{handleError}}" > 
    </core-ajax> 

现在我们已经将数据进入你的项目，我们需要处理这个问题。这是通过使用Polymer的数据绑定来完成的。

让我们绕行您正在创建的元素。以下行看不到任何错误。

<polymer-element name="profile-page" attributes="isprofile entity"> 

我们有一个名为'profile-page'的元素，它有两个属性'isprofile'和'entity'。

只是因为我的JavaScript极不理想我会在你的元素的底部每个属性传递作为一个单独的实体，使该行

<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> 

这里我们重复下面的每个元素。你的情况，你只能有一个条目，并将其存储在jsonString所以你的模板是这样的

<template repeat="{{u in jsonString}}"> 
     <profile-page name="{{u.name}} companyposition="{{u.companyposition}}" OrgUnitName="{{u.OrgUnitName}}"> 
     </profile-page> 
    </template> 

现在我们要你有问题。返回到您的profie-page元素。该行没有错

on-tap="{{edbutTapped}}" 

这调用了一个叫做edbutTapped的函数。以代码我给你前面

<script> 
    Polymer({ 
     edbutTapped: function() { 
       this.$.usernameinput.disabled = false; 
     } 
    }); 
</script> 

改变这里的唯一事情是添加以下代码

created: function() { 
    this.$.usernameinput.disabled = true; 
}, 

这是聚合物之后插入（{行，我不能在你修改后的代码中看到usernameinput被定义，但我假设你还没有发布它，并且它被定义在元素中。

而且你应该工作，但记住保持你的情况一致，说实话，我一直没有 - 某些部分的聚合物是区分大小写的 - 这让我感觉很好时间:)