Question

我正在尝试构建一个基于条件显示模板的简单组件。

如果user.isAdmin为true，则显示管理区域，否则显示访客区。

出于某种原因，2个模板区域都没有显示出来。我错过了什么？

这是我的组成部分：

<dom-module id="custom-component">
  <!--DOM-->
  <template>

    <template is="dom-if" if="{{!user.isAdmin}}">
      Guest Area
    </template>

    <template is="dom-if" if="{{user.isAdmin}}">
      Admin Area
    </template>

  </template>
  <!--Scripts-->
  <script>
    Polymer({
      is: 'custom-component',
      properties: {
        user: {"name":"Sample Name","isAdmin":true}
      }
    });
  </script>

</dom-module>

Answer 1

可以使用值字段在属性对象中指定属性的默认值。该值可以是原始值，或返回值的函数（应该用于初始化对象和数组以避免实例上的共享对象）。

来源：https://www.polymer-project.org/1.0/docs/devguide/properties.html#configure-values

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
</head>

<body>
  <dom-module id="unsupported-message">
    <!--DOM-->
    <template>

      <template is="dom-if" if="{{!user.isAdmin}}">
        Guest Area
      </template>

      <template is="dom-if" if="{{user.isAdmin}}">
        Admin Area
      </template>

    </template>
    <!--Scripts-->
    <script>
      Polymer({
        is: 'unsupported-message',
        properties: {
          user: { // You'll have to declare your object properties this way
            type: Object,
            value: function() {
              return {
                "name": "Mr. Admin",
                "isAdmin": true
              };
            }
          }
        }
      });
    </script>

  </dom-module>
  <unsupported-message></unsupported-message>
</body>

</html>

＆＃13;

聚合物中的简单标记IF不起作用

1 个答案: