htmlで第2引数としてオブジェクトとバインドするポリマー関数のバインド

作成しているカスタムローカリゼーション要素でPolymer 1.xの問題が発生しています。 HTMLの関数にバインドすると、オブジェクトとして引数を渡すことはできません。 my要素のtextContentは、関数から返された値ではなく、関数全体を文字列として取得します。例またはこのjsfiddle：https://jsfiddle.net/4n2da6sr/1/については、以下のサンプルコードを参照してください。htmlで第2引数としてオブジェクトとバインドするポリマー関数のバインド

HTML：

<dom-module id="x-example"> 
    <template> 
     <h1>[[getText('Hello world', {context: 'general'})]]</h1> 
    </template> 
</dom-module> 

<x-example></x-example>

のJavaScript：

let strings = { 
    general: { 
     'Hello world': { 
     message: 'Hola Mundo' 
    } 
}; 

Polymer({ 
    is: 'x-example', 
    getText: function(key, options = {context: 'general'}) { 
     let context = options.context; 
     let localMessage = key; 

     if (strings && strings[context][key]) { 
      let message = strings[context][key].message; 
      localMessage = message || key; 
     } 

     return localMessage; 
    } 
});

これのgetText関数は単にローカライズされたメッセージやキーを返し、メッセージをフィルタリングするための追加のオプションとしての第2のパラメータ（オブジェクト）を使用します。したがって、上記の例では、私はの出力を得ることを期待したい：

"Hola Mundo"

をしかし、その代わりに、私は、文字列として評価関数全体を取得：

"getText('Hello world', {context: 'general'})"

これですべてのヘルプははるかに高く評価されるだろう。

出典

2016-06-15 jordan

私は、ポリマーを使用していませんでしたが、私はあなたの要素のIDを使用してリンケージのためにそれに頼ることは異なるIDが使用されるシャドウDOMに間違って行くことを読んだ –

@AMacdonaldありがとうございますが、これは単なるコード例ですので、ここを読みやすくするためのものです。 – jordan

それを使用するには、計算されたプロパティと似ています。それはコンピューティング機能と、ゼロ以上の引数を含んでいます。 引数はの依存プロパティまたは文字列または数値リテラルにすることができます。

https://www.polymer-project.org/1.0/docs/devguide/data-binding#annotated-computed

getText()のあなたの呼び出しの問題点は、それが唯一の文字列、数値、およびプロパティを受け入れ、オブジェクトリテラルを、渡しているということです。

optionsとstringsがプロパティであるように要素を再構成すると、その要素を機能させることができます。

<!doctype html> 
<html> 

<head> 
    <meta name="description" content="http://stackoverflow.com/questions/37841958"> 
    <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"> 
</head> 

<body> 

    <dom-module id="x-example"> 
    <template> 
     <h1>[[getText('Hello world', options, strings)]]</h1> 
    </template> 
    <script> 
     Polymer({ 
     is: 'x-example', 
     properties: { 
      options: { 
      type: Object, 
      notify: true, 
      value: function() { 
       return {'context': 'general'}; 
      } 
      }, 
      strings: { 
      type: Object, 
      notify: true, 
      value: function() { 
       return { 
       'general': { 
        'Hello world': { 
        'message': 'Hola Mundo' 
        } 
       } 
       } 
      } 
      } 
     }, 
     getText: function(key, options, strings) { 
      let context = options.context; 
      let localMessage = key; 

      if (strings[context][key]) { 
      let message = strings[context][key].message; 

      localMessage = message || key; 
      } 

      return localMessage; 
     } 
     }); 
    </script> 
    </dom-module> 

    <x-example></x-example> 
</body> 

</html>

http://jsbin.com/tagohu/edit?html,console,output

出典

2016-06-15 18:26:16

あなたのオブジェクトプロパティを作成し、その後、Aが結合計算

let strings = { 
 
    general: { 
 
     'Hello world': { 
 
     message: 'Hola Mundo' 
 
     } 
 
    } 
 
}; 
 

 
Polymer({ 
 
    is: 'x-example', 
 
    properties:{ 
 
    \t options:{ 
 
    type:Object, 
 
    value:{context:'general'} 
 
    } 
 
    }, 
 
    getText: function(key,options = {context: 'general'}) { 
 
    let context = options.context; 
 
    let localMessage = key; 
 

 
    if (strings && strings[context][key]) { 
 
     let message = strings[context][key].message; 
 

 
     localMessage = message || key; 
 
    } 
 

 
    return localMessage; 
 
    } 
 
});

 body { 
 
    font-family: sans-serif; 
 
}

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 

 
<dom-module id="x-example"> 
 
    <style> 
 
    :host { 
 
     display: block; 
 
    } 
 
    </style> 
 
    <template> 
 
     <h1> 
 
      [[getText('Hello world',options)]] 
 
     </h1> 
 
    </template> 
 
</dom-module> 
 

 
<x-example></x-example>

出典

2016-06-15 18:15:49 a1626

htmlで第2引数としてオブジェクトとバインドするポリマー関数のバインド

答えて

関連する問題