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

我想我需要＆＃34;更新＆＃34;我的元素在更改其实体属性后以某种方式？

Answer 1

尝试以下

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

这个。$允许您访问元素中定义的控件，usernameinput是您为输入分配的ID。

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

Answer 2

＆＃39;禁用＆＃39;是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>

当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-element name="profile-page" attributes="isprofile entity">

我们有一个名为＆＃39; profile-page＆＃39;有两个属性＆＃39; isprofile＆＃39;和＆＃39;实体＆＃39;。

只是因为我的Javascript有点不尽如人意，我会将每个属性作为单独的实体传递给该行

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

然后在元素的底部定义脚本标记

<script>
    Polymer({
        name: "",
        companyposition: "",
        OrgUnitName: ""
        });
</script>

现在回到调用（profile-page）。以下代码（来自我的项目）具有以下内容;

    <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之后插入的（{line。我在修改后的代码中看不到usernameinput的定义，但我假设你没有发布它，它在元素中定义。

你应该工作，但要记住保持你的情况一致，并且说实话我没有 - 聚合物的某些部分是区分大小写的 - 这一直困扰着我：）

从Polymer js中删除子元素的属性

3 个答案: