Polymer 1.0 更多路由

Question

聚合物：1.0.3
更多路由：1.0.0

Polymer 有一些问题 "more-routing"。那些是-

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

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

2) 第一级路由有效（即使我收到那些 error/warning 消息）。但是二级路由（我的意思是嵌套路由）不起作用。在 "users" 页面上按名称不会将我带到 "user-info" 页面。事实上，名称并不显示为 link，而是显示为文本。这是我的代码 -

我的"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>

Answer 1

对于 1.0（可能更早），Polymer 停止支持数据绑定中的表达式 (Migration Guide - Data binding). Thankfully, you can still call a function in a binding (called a "computed binding")。

据我所知，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>

Polymer 1.0 更多路由

Polymer 1.0 more-routing

polymer

polymer-1.0