首页 > 编程语言> > Javascript-聚合物dom-if如果在if之后会怎样？

Javascript-聚合物dom-if如果在if之后会怎样？

2019-10-26 06:46:04 作者：互联网

我的元素有一个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>

(如果有人输入,我愿意采用其他方式！)

解决方法:

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

I tried using square brackets ([[]]), curly brackets ({{}}), and even no brackets (if="_isDemo()"). Do I need to use them?

是的,您需要它们.数据绑定(包括计算的绑定)需要使用方括号(方括号或大括号).通常,大括号表示双向数据绑定,而方括号表示单向数据绑定.对于计算的绑定,它们都具有相同的效果.

标签：polymer,polymer-1-0,javascript
来源： https://codeday.me/bug/20191026/1934648.html