Polymer 1.0：帮助使用 dom-if

Question

有人可以提供正确实施 dom-if 的示例吗？

official documentation 没有提供正确使用的示例。 （抱歉没有直接的link。必须使用左上角的菜单和select dom-if）。

这是我目前所拥有的。显然，它不起作用。

<template>
  ...
  <template is="dom-if" if="{{action}}=='Login'">
       <!-- Also tried: if="{{action=='Login'}}" -->
    <a href="#">Forgot password?</a>
  </template>
  ...
</template>

Answer 1

我认为下面的示例非常简单明了并且易于 understand/implement（它不在您提供的 link 中）：

https://www.polymer-project.org/1.0/docs/devguide/templates.html

从页面...

<div>{{user.name}}</div>

<template is="dom-if" if="{{user.isAdmin}}">
  Only admins will see this.
  <div>{{user.secretAdminStuff}}</div>
</template>
...

希望对您有所帮助。

Answer 2

这很麻烦，但你必须这样做：

<template is="dom-if" if="[[_actionIsLogin(action)]]">
  <a href="#">Forgot password?</a>
</template>

<script>
  Polymer({
    ...
    _actionIsLogin: function(action) {
      return action === 'Login';
    }
    ...
  });
</script>

显式创建 returns true 或 false 的函数。

Answer 3

<template>
    <iron-ajax           
            auto
            url="https://jsonplaceholder.typicode.com/todos"
            handle-as="json"
            last-response="{{baul}}">
    </iron-ajax>

    <template is="dom-repeat" items="{{baul}}" >
        <template is="dom-if" if="{{item.completed}}">{{item.title}} is completed<br></template>
    </template>


</template>

Polymer 1.0：帮助使用 dom-if

Polymer 1.0: Help using dom-if

javascript

api

dom

polymer

polymer-1.0