1

聚合物：1.0.3
更多路由：1.0.0

Polymer“更多路由”存在一些问题。那些是 -

1）在控制台上获取此日志 -

[dom-bind::_annotatedComputationEffect]: compute method `urlFor` not defined

2）第一级路由有效（即使我收到那些错误/警告消息）。但是二级路由（我的意思是嵌套路由）不起作用。在“用户”页面上按名称不会将我带到“用户信息”页面。事实上，该名称并未显示为链接，而是显示为文本。这是我的代码 -

我的“routing.html”——

<link rel="import" href="../bower_components/more-routing/more-routing.html">

<more-routing-config driver="hash"></more-routing-config>


<more-route name="home" path="/"></more-route>

<more-route name="users" path="/users">
  <more-route name="user-info" path="/:name"></more-route>
</more-route>

<more-route name="contact" path="/contact"></more-route>

我的“index.html”——

    <more-route-selector>
        <paper-menu class="list" on-iron-select="onMenuSelect">
            <a route="home" href="{{urlFor('home')}}">
                <iron-icon icon="home"></iron-icon>
                <span>Home</span>
            </a>


            <a route="users" href="{{urlFor('users')}}">
                <iron-icon icon="info"></iron-icon>
                <span>Users</span>
            </a>

            <a route="contact" href="{{urlFor('contact')}}">
                <iron-icon icon="mail"></iron-icon>
                <span>Contact</span>
            </a>
        </paper-menu>
    </more-route-selector>
    <more-route-selector selectedParams="{{params}}">
        <iron-pages>
            <section route="home">
                <paper-material elevation="1">
                    <bortini-home></bortini-home>
                </paper-material>
            </section>

            <section route="users">
                <paper-material elevation="1">
                    <h2 class="paper-font-display2">Users</h2>

                    <p>This is the users section</p>
                    <a href="{{urlFor('user-info', {name: 'Rob'})}}">Rob</a>
                </paper-material>
            </section>

            <section route="user-info">
                <paper-material elevation="1">
                    <h2 class="paper-font-display2">
                        User:<span>{{params.name}}</span>
                    </h2>

                    <div>This is <span>{{params.name}}</span>'s section</div>
                </paper-material>
            </section>

            <section route="contact">
                <paper-material elevation="1">
                    <h2 class="paper-font-display2">Contact</h2>

                    <p>This is the contact section</p>
                </paper-material>
            </section>
        </iron-pages>
    </more-route-selector>

4

1 回答 1

3

在 1.0（可能更早）中，Polymer 停止支持数据绑定中的表达式（迁移指南 - 数据绑定）。幸运的是，您仍然可以在绑定中调用函数（称为“计算绑定”）。

据我所知，该urlFor()方法必须稍微过于复杂，无法用作计算绑定（params 对象不是依赖属性）。我能够通过包装一个更简单的函数来使其工作urlFor()- 一个作为计算绑定工作的函数 - 如下所示：

<more-routing-config driver="path"></more-routing-config>
<more-route name="users" path="/users">
  <more-route name="user-info" path="/:name"></more-route>
</more-route>

<template is="dom-bind">
  <a href="{{makeUrl('user-info', 'Rob')}}">Rob</a>
</template>

<script>
  var template = document.querySelector('template');
  template.makeUrl = function(route, name) {
    return MoreRouting.urlFor(route, {name:name});
  };
</script>

您还可以在计算绑定中传递变量，只要它们是依赖属性，例如item在重复模板中

<template is="dom-bind">
  <template is="dom-repeat" items="{{users}}">
    <a href="{{makeUrl('user-info', item)}}">{{item.name}}</a>
  </template>
</template>

<script>
  var template = document.querySelector('template');
  template.makeUrl = function(route, user) {
    return MoreRouting.urlFor(route, {name:user.name});
  };
</script>
于 2015-06-18T05:36:49.063 回答