Question

我遇到了Polymer 1.x的一个问题，我正在创建一个自定义本地化元素。当绑定到HTML中的函数时，我似乎无法将参数作为对象传递。 my-element textContent将整个函数作为字符串，而不是函数返回的值。请参阅下面的示例代码以获取示例或此jsfiddle：https://jsfiddle.net/4n2da6sr/1/。

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函数仅返回本地化的消息或键，并使用第二个参数（对象）作为过滤消息的附加选项。所以在上面的例子中，我希望得到一个输出：

"Hola Mundo"

但我将整个函数评估为字符串：

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

非常感谢任何帮助。

Answer 1

使您的对象成为属性，然后使用它

＆＃13;

let strings = {
    general: {
      'Hello world': {
        message: 'Hola Mundo'
      }
    }
};

Polymer({
  is: 'x-example',
  properties:{
  	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;
  }
});

＆＃13;

     body {
  font-family: sans-serif;
}

＆＃13;

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

＆＃13;

Answer 2

计算绑定类似于计算属性：它包括a 计算函数和零个或多个参数。 参数可以依赖属性或字符串或数字文字。

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

聚合函数绑定在html中，对象作为第二个参数

2 个答案: