Ractive.js routing

Ractive.js routing

本文关键字：routing js Ractive      更新时间：2023-09-26

所以我一直在将我的应用移植到reactive。我目前正在使用Swig从Express提供每个页面…在客户端呈现一个有吸引力的模板。当我可以提供一个页面并使用activex完成所有客户端渲染时，这似乎有点疯狂。

我知道react没有随路由器一起发货，并且确实在设计上遗漏了一个(为了提供灵活性等-这是有道理的)。我在谷歌上搜索了一下Stack overflow，看到了一些推荐的第三方路由器库…

然而，我找不到任何教程或建议的最佳实践，关于路由与叙事。我的问题是，有空位吗?

感谢

** EDIT **

继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来处理所有的db的东西。所有基本的CRUD内容。我用的是socket。

react .js和routing?这其实很简单，不需要魔法。

<!-- 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>
相关文章：