Polymer 如何围绕视图模型构建聚合物SPA和核心页面？

例如，我曾经在不同的聚合物元素周围放置了

，但现在我删除了它们，因为让

核心动画页面

发挥作用，并翻转

显示

属性，以便

部分

及其子元素可以简单地显示或不显示，正如你在下面看到的

        <core-animated-pages id="pages" selected="{{app.router.selectedPage}}" valueattr="data-page" fit>
          <section data-page="channels" layout vertical>
            <community-list id="community-list" app="{{app}}" viewModel="{{app.mainViewModel}}"></community-list>
          </section>
          <section data-page="lobby">
            <chat-view app="{{app}}" viewModel="{{app.mainViewModel.chatViewModel}}"></chat-view>
          </section>
          <section data-page="people" layout vertical>
            <people-list app="{{app}}" viewModel="{{app.mainViewModel.peopleViewModel}}"></people-list>
          </section>
          <section data-page="events">
            <inbox-list id="inbox-list" app="{{app}}" viewModel="{{app.mainViewModel.eventViewModel}}"></inbox-list>
          </section>
          <section data-page="news">
            <inbox-list id="inbox-list" app="{{app}}" viewModel="{{app.mainViewModel.newsViewModel}}"></inbox-list>
          </section>
        </core-animated-pages>

我将getter传递到

viewModel

属性中，例如

app.mainViewModel.chatViewModel

，该属性获取适合给定频道/社区的视图模型实例（此时我交替使用这两个术语），例如，如果我们在“foo”频道，

app.mainViewModel.chatViewModel

返回“foo”频道的聊天视图模型

问题是：每当通道改变时，我需要以某种方式再次触发视图模型的getter

一个选项是将特定频道的所有元素（即除频道页面本身之外的所有元素）包装在

中，这样当我们不在频道中时，这些元素实际上会分离，而当我们选择新频道时，这些元素会重新连接，从而重新触发getter并返回相关的视图模型

我已经验证了这一点，但我一直在努力避免每次破坏和重新创建元素的情况

---

有什么更好的方法来实现我的架构？谢谢大家!

我刚刚为自己构建了一个路由器和解决这个问题的行为（请参阅github上的akc42/akc路由器）

要解释整个问题，不在本回复的范围内，但简单地说，附加函数中的路由器在异步等待开始于其父级（我认为将是dom绑定模板）并解析dom树后，会查找其中包含“行为”的所有元素。它将模型构建为这些元素的树。URL段映射到每个“行为”

关键问题在于url更改（应用程序被调用，或通过用户使用后退和前进按钮），路由器可以使用此树调用行为，然后通过抽象调用调用元素

（快速查看此设置的测试将非常简单地显示如何使用它）

你的方法似乎有点不同（如果我正确理解你的例子的话），因为你在路由器级别得到了一个巨大的模型，并且希望每个子元素都能看到它的一部分。我已委托每个较低级别的元素在路由器要求时获取其模型的一部分。但是你的核心问题，刺激低层次的问题已经解决了

我刚刚开始将它构建到我的项目中（我以前使用过page.js，但我一直在努力研究它如何触发铁页面，这就是我构建路由器的原因）。但测试线束确实表明它可以完成这项工作