从 Polymer 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"}

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

Answer 1

试试下面的

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

this.$ 允许您访问元素中定义的控件，并且 usernameinput 是您分配给输入的 id。

这可以位于您定义的元素的结束标记下方。

Answer 2

'禁用'是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

好的，这将是一个很长的答案（因此我没有输入这个作为我原始答案的编辑）。我刚刚做了一些功能相同的东西。

首先是这段代码；

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

Polymer 有一个名为 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;
},

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

而且你应该在工作，但请记住保持你的大小写一致，老实说我不是 - Polymer 的某些部分是区分大小写的 - 这一直让我感到困惑:)