聚合物函数在HTML中与对象作为第二个参数结合

我遇到了我创建的自定义本地化元素的聚合物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'})"

对此的任何帮助将不胜感激。

计算的绑定类似于计算属性：它包括一个计算功能和零或更多参数。参数可以是因属性或字符串或数字文字。

https://www.polymer-project.org/1.0/docs/devguide/data-binding#anting#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

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

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;
  }
});

     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>

相关内容

最新更新

热门标签：