Ractive.js路由

Question

因此，我一直在将应用程序移植到Ractive。 目前，我正在使用Swig ...在Express中提供每个页面的内容，以渲染出有效模板客户端。 当我可以提供一页并使用ractive进行所有客户端渲染时，这似乎有点疯狂。

我知道Ractive并不随路由器一起提供，实际上确实是出于设计目的而忽略了（以提供灵活性等-这很有意义）。 我已经用Google搜索，并通过Stack溢出进行了拖网，发现推荐了许多第三方路由器库...

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

谢谢

**编辑**

接下来是martypdx评论-这是我需要的路线：

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

在快递中，我建立了一个简单的api，可以处理所有的数据库内容。 我正在使用socket.io来回发送所有数据。

Answer 1

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>

您还有其他选项，例如计算属性：

{{# isHome }}<home />{{/}}
{{# isAbout }}<about />{{/}}
{{# isNotFound }}<not-found />{{/}}

<script>

function router(path){
  return function(){
    // Your pattern matching algorithm here. Return true if match.
    // You can use location.pathname, location.search and location.hash
  }
}

component.exports = {
  computed: {
    isHome: router('/'),
    isAbout: router('/about'),
    isNotFound: router('/404'),
  },
  components: {
    home: /* home constructor */,
    about: /* about constructor */,
    'not-found': /* not-found constructor */,
  }
};
</script>

至于传递数据，您还有很多选择。 您可以使用oninit在组件创建并准备呈现时运行（或在这种情况下，当某节变为真实时，即isHome为true时{{# isHome }} ）运行。 这是<home /> oninit获取数据的示例：

<!-- home.js -->
<h1>Home</h1>
<div>{{someDynamicData}}</div>

<script>
var SomeDataStore = require('stores/some-data-store');
component.exports = {
  oninit: function(){

    // Let's say your data comes from an AJAX call
    $.get(...).then(function(response){
      this.set('someDynamicData', response);
    }.bind(this));

    // Or say it's from a listenable data store (like Reflux)
    SomeDataStore.listen(function(){
      this.set('someDynamicData', SomeDataStore.getSomeDynamicData());
    }); 
  }
}
</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>