Javascript js路由

所以我一直在把我的应用移植到ractive。我目前正在使用Swig服务Express的每个页面。。。在客户端呈现一个实用的模板。当我可以提供一个页面并使用ractive进行所有客户端渲染时，这似乎有点疯狂

我知道Ractive并没有随附路由器，而且确实在设计上遗漏了一个路由器（以提供灵活性等，这是有道理的）。我在谷歌上搜索了一下，搜索了一下堆栈溢出，看到了一些推荐的第三方路由器库

然而，我找不到任何关于rative路由最佳实践的教程或建议。所以我的问题是-有没有可用的

谢谢

**编辑**

以下是martypdx的评论-以下是我需要的路线：

/home <!-- a static page -->
/list <!-- a list of items -->
/list/:itemID <!-- a link to an items detail page -->
/contact <!-- a static contact page -->

/home
/名单
/list/：itemID
/接触

---

在express中，我构建了一个简单的api来处理所有的db内容。。所有基本的积垢。我正在使用socket.io来回发送所有数据。

Ractive.js和路由？其实很简单，不需要魔法

<!-- main.js -->
{{# route('/') }}<home />{{/}}
{{# route('/about') }}<about />{{/}}
{{# route('/404') }}<not-found />{{/}}

<script>
component.exports = {
  data: {
    route: function(path){
      // Your pattern matching algorithm here. Return true if match.
      // You can use location.pathname, location.search and location.hash
    }
  },
  components: {
    home: /* home constructor */,
    about: /* about constructor */,
    'not-found': /* not-found constructor */,
  }
};
</script>

或者，您可以让路由组件获取并向下传递它（路由组件“拥有”数据）。这与计算方法配合得很好，因为您可以观察计算值并在适当的视图出现时获取

<!-- main.js -->
{{# isHome }}<home data="{{homeData}}" />{{/}}
{{# isAbout) }}<about data="{{aboutData}}" />{{/}}
{{# isNotFound }}<not-found data="{{notFoundData}}" />{{/}}

<script>
component.exports = {
  ...
  oninit: function(){
    this.observe('isHome', function(isHome){
      if(!isHome) return;

      // still the same here, you can use any data source, as long as you
      // set to a data property in the end
      this.get(...).then(function(response){
        this.set('homeData', response);
      }.bind(this));

    });

    this.observe('isAbout', function(isAbout){
      if(!isAbout) return;

      ...

    });
  }
};
</script>

{{{{{{}}{{/}}
{{{{{}}{/}}
{{{#isNotFound}{{/}
component.exports={
...
oninit:function（）{
观察（'isHome'，函数（isHome）{
如果（！isHome）返回；
//在这里仍然一样，您可以使用任何数据源，只要您
//最后设置为数据属性
this.get（…）.then（函数（响应）{
此.set（'homeData'，响应）；
}.约束（这个）；
});
观察（'isAbout'，函数（isAbout）{
如果（！isAbout）返回；
...
});
}
};

Ractive.js和路由？其实很简单，不需要魔法

<!-- main.js -->
{{# route('/') }}<home />{{/}}
{{# route('/about') }}<about />{{/}}
{{# route('/404') }}<not-found />{{/}}

<script>
component.exports = {
  data: {
    route: function(path){
      // Your pattern matching algorithm here. Return true if match.
      // You can use location.pathname, location.search and location.hash
    }
  },
  components: {
    home: /* home constructor */,
    about: /* about constructor */,
    'not-found': /* not-found constructor */,
  }
};
</script>

或者，您可以让路由组件获取并向下传递它（路由组件“拥有”数据）。这与计算方法配合得很好，因为您可以观察计算值并在适当的视图出现时获取

<!-- main.js -->
{{# isHome }}<home data="{{homeData}}" />{{/}}
{{# isAbout) }}<about data="{{aboutData}}" />{{/}}
{{# isNotFound }}<not-found data="{{notFoundData}}" />{{/}}

<script>
component.exports = {
  ...
  oninit: function(){
    this.observe('isHome', function(isHome){
      if(!isHome) return;

      // still the same here, you can use any data source, as long as you
      // set to a data property in the end
      this.get(...).then(function(response){
        this.set('homeData', response);
      }.bind(this));

    });

    this.observe('isAbout', function(isAbout){
      if(!isAbout) return;

      ...

    });
  }
};
</script>

{{{{{{}}{{/}}
{{{{{}}{/}}
{{{#isNotFound}{{/}
component.exports={
...
oninit:function（）{
观察（'isHome'，函数（isHome）{
如果（！isHome）返回；
//在这里仍然一样，您可以使用任何数据源，只要您
//最后设置为数据属性
this.get（…）.then（函数（响应）{
此.set（'homeData'，响应）；
}.约束（这个）；
});
观察（'isAbout'，函数（isAbout）{
如果（！isAbout）返回；
...
});
}
};

您有多少条路线？考虑到您的需求是多么简单或复杂，可能有助于推动最佳解决方案。嗨，Martypdx，我有三个。我会用这些信息编辑我的问题。你有多少条路线？考虑到您的需求是多么简单或复杂，可能有助于推动最佳解决方案。嗨，Martypdx，我有三个。我会用这些信息编辑我的问题。谢谢。如何处理每个路由的模板和数据加载？@Rob请查看我的动态组件答案。您可以根据路线更改名称。@Rob更新了答案。。。而且你仍然有很多选择，例如：谢谢如何处理每个路由的模板和数据加载？@Rob请查看我的动态组件答案。您可以根据路线更改名称。@Rob更新了答案。。。而且你仍然有很多选择，例如：