Question

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

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

这是我到目前为止所拥有的。显然，它没有用。

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

Answer 1

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

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

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

明确创建一个返回true或false的函数。

Answer 2

我认为以下示例非常直接且易于理解/实施（它不在您提供的链接中）：

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

3 个答案: