從聚合物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被定義，但我假設你還沒有發佈它，並且它被定義在元素中。

而且你應該工作，但記住保持你的情況一致，說實話，我一直沒有 - 某些部分的聚合物是區分大小寫的 - 這讓我感覺很好時間:)