javascript - Ractive.js 路由

Question

所以我一直在将我的应用程序移植到 ractive。我目前正在使用 Swig 为 Express 提供每个页面......以呈现一个活跃的模板客户端。当我可以提供一个页面并使用 ractive 来完成所有客户端渲染时，这似乎有点疯狂。

我知道 Ractive 不附带路由器，而且确实在设计上省去了一个(为了提供灵 active 等 - 这是有道理的)。我用谷歌搜索并浏览了 Stack overflow，发现推荐了一些第三方路由器库......

但是，我找不到任何关于使用 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 -->

在 express 中，我构建了一个简单的 api 来处理所有数据库内容……所有基本的 CRUD 内容。我正在使用 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 }} 当 isHome 是 true 时)。这是 <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>

或者您可以让路由组件获取并向下传递(并且路由组件“拥有”数据)。这适用于计算方法，因为您可以观察计算值并在适当的 View 出现时获取。

<!-- 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>