0

とりわけ、コア入力と紙のボタンがあるカスタム要素があります。要素を作成すると入力が無効になり、ボタンをタップしたときに有効にしたい。いくつかの方法を試しましたが、入力の属性にアクセスできません。

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

エンティティ属性を変更した後、何らかの形で要素を「更新」する必要があると思いますか?

4

3 に答える 3

0

以下を試してください

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

this.$ を使用すると、要素で定義されたコントロールにアクセスできます。usernameinput は、入力に割り当てた ID です。

これは、定義している要素の終了タグの下に配置できます。

于 2015-02-23T13:22:19.440 に答える
0

OK、これは長い回答になります (そのため、元の回答の編集としてこれを入力しないのはなぜですか)。機能的に同じことをしただけです。

まず、このコードです。

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

Polymer には core-ajax と呼ばれるコントロールがあります。これは、その名前が示すように ajax 呼び出しを行います。もう 1 つの非常に優れた点は、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">

「isprofile」と「entity」の 2 つのプロパティを持つ「profile-page」という要素があります。

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

ここでは、次の各要素を繰り返します。あなたの場合、エントリは1つしかなく、jsonStringに保存されているため、テンプレートは次のようになります

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

今、あなたが抱えている問題に取り掛かります。profile-page 要素に戻ります。ラインに異常なし

on-tap="{{edbutTapped}}"

これは、edbutTapped という関数を呼び出します。以前に提供したコードを取得する

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

ここで変更する唯一のことは、次のコードを追加することです

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

これは、Polymer({ 行の後に挿入されます。修正されたコードでは、usernameinput が定義されている場所を確認できませんが、投稿しておらず、要素で定義されていると想定しています。

そして、あなたは働いているはずですが、あなたのケースの一貫性を保つことを忘れないでください.正直に言うと、私はそうではありませんでした.

于 2015-02-23T20:18:38.480 に答える
0

「無効」は条件付き属性です。

したがって、これは正しい使用法になります。

<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';
        },
于 2015-02-23T14:46:13.977 に答える