Question

我的元素有一个demoMode布尔属性，我希望在属性为true时显示一些虚拟数据，在false时显示实时数据。

我试过了：

<template dom-if if="{{_isDemo()}}">hello from demo</template>
<template dom-if if="{{_isLive()}}">hello from live</template>

其中的功能仅为{return this.demoMode;}和{return !(this.demoMode);}。

无论如何，现场模式似乎总是显示出来。我尝试使用方括号（[[]]），大括号（{{}}），甚至没有括号（if="_isDemo()"）。我需要使用它们吗？

它目前的工作方式是应用程序，并且demo/index.html发送demo-mode属性，如：

<my-app demo-mode></my-app>

（如果有人提出意见，我会采取其他方式做到这一点！）

Answer 1

正如@montrealist指出的那样，if属性应该计算为布尔值。绑定本身不需要布尔值;它也可以是一个返回布尔值的计算binding / property。

您正在为if条件使用计算绑定，但绑定缺少变量依赖项（即参数），因此在初始化时仅计算一次。我认为demoMode有一个虚假的默认值，这会导致_isLive()始终评估为true。

由于_isDemo()和_isLive()都取决于this.demoMode，因此您的计算绑定应分别为_isDemo(demoMode)和_isLive(demoMode)：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      demoMode: {
        type: Boolean,
        value: false
      }
    },
    _isDemo: function(demo) {
      return demo;
    },
    _isLive: function(demo) {
      return !demo;
    },
    _toggleDemo: function() {
      this.demoMode = !this.demoMode;
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <button on-tap="_toggleDemo">Toggle Demo Mode</button>
      <template is="dom-if" if="{{_isDemo(demoMode)}}">
        <h1>Demo Mode</h1>
      </template>
      <template is="dom-if" if="{{_isLive(demoMode)}}">
        <h1>Live Mode</h1>
      </template>
    </template>
  </dom-module>
</body>

codepen

我尝试使用方括号（[[]]），花括号（{{}}），甚至没有括号（if="_isDemo()"）。我需要使用它们吗？

是的，你需要它们。数据绑定（包括计算绑定）需要括号（方形或卷曲）。通常，大括号表示双向数据绑定，而方形表示单向。对于计算绑定，它们都具有相同的效果。

Answer 2

我认为你不能将一个函数传递给if。 API specifically mentions a boolean。来自doc：

可以通过将元素包装在名为dom-if
的自定义HTMLTemplateElement类型扩展名中，根据布尔属性有条件地标记元素

坚持属性。此外，您的语法可能基于旧版本的Polymer。您需要声明条件模板，如下所示：

<template is="dom-if" if="{{demo}}">hello from demo!</template>

这是一个working plunkr（所有逻辑都在name-tag.html内）。

聚合物dom-如果之后会发生什么？

2 个答案: