聚合物dom-如果之后會發生什么？
[英]Polymer dom-if what comes after the if?
問題描述
我有一個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>
（如果有人提出意見，我會采取其他方式做到這一點！）
2 個解決方案
解決方案1
3 2017-03-02 04:44:38
正如@montrealist指出的那樣， if屬性應該計算為布爾值。 綁定本身不需要布爾值; 它也可以是一個返回布爾值的計算綁定 / 屬性 。
您正在為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>
我嘗試使用方括號（
[[]]），大括號（{{}}），甚至沒有括號（if="_isDemo()"）。 我需要使用它們嗎？
是的，你需要它們。 數據綁定（包括計算綁定）需要括號（方形或卷曲）。 通常，大括號表示雙向數據綁定，而方形表示單向。 對於計算綁定，它們都具有相同的效果。
解決方案2
1 2017-03-02 02:34:40
我不認為你可以將函數傳遞給if 。 API 專門提到了一個布爾值 。 來自doc：
可以通過將元素包裝在名為dom-if的自定義HTMLTemplateElement類型擴展中，根據布爾屬性有條件地標記元素
堅持住房產。 此外，您的語法可能基於舊版本的Polymer。 您需要聲明條件模板，如下所示：
<template is="dom-if" if="{{demo}}">hello from demo!</template>
這是一個有效的plunkr （所有邏輯都在name-tag.html ）。
聚合物dom-如果不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.