Googleポリマーの鉄画像要素のsrcを変更するには

ありがとうございました。私は最終的に良い結果を得ました。問題は、Googleが提供するgetUrl（）関数の標準的な使用法を理解できなかったことです。Googleポリマーの鉄画像要素のsrcを変更するには

新しい質問：貴重な回答を読んで、私は次のように考えています。アイアンページオブジェクトのsrc値を、最初のsrc値に設定した後、古い質問のコンテキスト内で変更する方法を聞かせてください。

古い質問： Googleポリマーについてお聞かせください。私のプロジェクトのコードを以下に示します。単にiron-image要素のsrcを変更したいだけです。「準備完了」機能の2つのバージョンをテストしました。しかし、両方ともiron-image要素のsrcを変更できませんでした。私のコードでどこが間違っているかを指摘できますか？

<iron-image id="id1" src="[[mysrc]]"></iron-image> 

    Polymer({ 

    properties { mysrc = { type:String , notify:true } }, 

    (version 1) ready: function() { mysrc = getUrl(); } 

    (version 2) ready: function() { this.$.id1.src = getUrl(); } 

    })

アラート（getUrl（））は、正しい正しい文字列を表示します。

出典

2016-06-14 yuzu

をあなたのコードが動作しない理由はありません。つまり、

--- ready: function() { mysrc = getUrl(); } +++ ready: function() { this.mysrc = this.getUrl(); }

はここでは記述している適切なシナリオを扱うJSビンです。 PlunkerやJSbinsなどでもっと完全な例を投稿できますか？ –

'mysrc'の値を' this.mysrc = {something} 'を使って変更すると、 'src'の値が変わるはずです – a1626

新しい質問のために新しいスレッドを好んでください。答えが得られれば、いつでも自分の質問に答えることができます。必要に応じて新しい質問にリンクすることもできます。 – a1626

プロパティとメソッドを適切なコンテキストから呼び出さないことがありますか？プロパティを設定し、メソッドを呼び出すには、thisから参照する必要があります。

<!doctype html> 
<html> 

<head> 
    <meta name="description" content="http://stackoverflow.com/questions/37811023"> 
    <meta charset="utf-8"> 
    <base href="http://polygit.org/components/"> 
    <script href="webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link href="polymer/polymer.html" rel="import"> 
    <link href="iron-image/iron-image.html" rel="import"> 
    <link href="paper-button/paper-button.html" rel="import"> 
</head> 

<body> 
    <dom-module id="my-el"> 
    <template> 
     <iron-image src="[[url]]"></iron-image> 
    </template> 
    <script> 
     Polymer({ 
     is: 'my-el', 
     properties: { 
      url: { 
      type: String, 
      notify: true 
      } 
     }, 
     ready: function(e) { 
      this.url = this.getUrl(); 
     }, 
     getUrl: function() { 
      return 'http://lorempixel.com/300/300'; 
     } 
     }); 
    </script> 
    </dom-module> 
    <my-el></my-el> 
</body> 

</html>

https://jsbin.com/wanemi/edit?html,output

出典

2016-06-15 00:14:53

ありがとうございました。それは私の多くを助けます。私の文脈では、うまくいかなかった。おそらく、私のgetUrl（）が遅すぎて、鉄ページに初期src値、つまりnull値が設定された後にURLを返すためです。だからおそらく、私の最終的な問題は簡単です。つまり、最初のsrc値が設定された後の鉄画像のsrc値を変更する方法です。 – yuzu

@KayceBasques参考、** http **：//jsbin.comにリンクしていることに気付きました。** https **：//jsbin.comにリダイレクトされてしまいます。デモの ''は** http **を指しています。これは '混合コンテンツ'エラーと空白のページにつながります。 – tony19

頭のおかげで@ tony19 –

あなたは、プロパティがthisにバインドされているので、あなたが、存在しない変数を参照、バージョン1では

ready: function() { this.mysrc = getUrl(); }

または

ready: function() { this.set('mysrc', getUrl());

を試してみてください。

バージョン2では動作するはずです。

出典

2016-06-14 11:54:41 zeitiger

あなたの答えは、私は両方のバージョンをもう一度試しましたが、同じ悪い結果を得ました。 "src"は変更されませんでした。バージョン1ではエラーは発生しませんが、バージョン2では「this。$。id1.src」は定義されていません。 – yuzu

Googleポリマーの鉄画像要素のsrcを変更するには

答えて

関連する問題