backbone.js - Ractive，组件和路由

Question

假设我在页面上有一个根 Ractive，以及在假设的主干路由器导航到路由时显示的各种小部件:

var widget1=Ractive.extend({template:"<div>{{foo}}</div>"});
var widget2=Ractive.extend({template:"<div>{{bar}}</div>"});

var view=new Ractive({
   template:"<nav></nav><widget />",
   components:{widget:widget1}
});

var Router=Backbone.Router.extend({/* the code ... */})

所以当我导航到/widget1 和 widget2 时，widget1 会显示在路由是/widget2 时，

在不创建单独的根 Ractives 或隐藏/显示小部件的情况下，根据当前路由交换小部件的最佳方法是什么？谢谢。

Answer 1

我之前建议的替代解决方案，允许以更动态的方式设置路由(即无需预先在模板中声明它们):

<nav>...</nav>

<!-- we have a single <route> component representing all possible routes -->
<route current='{{currentRoute}}'/>

可以这样实现:

Ractive.components.route = Ractive.extend({
  template: '<div class="container"></div>',
  init: function () {
    this.container = this.find( '.container' );

    this.observe( 'current', function ( currentRoute ) {
      var View = routes[ currentRoute ];

      if ( this.view ) {
        this.view.teardown();
      }

      this.view = new View({
        el: this.container
      });
    });
  }
});

然后，切换路由:

router.on( 'route', function ( route ) {
  ractive.set( 'currentRoute', route );
});

使用这种方法，您需要做的就是在您的应用中的某个时刻注册所有可能的路线:

routes.widget1 = Ractive.extend({template:"<div>{{foo}}</div>"});

……等等。如有必要，您可以通过检索引用与每个 View 对象进行交互:

route = ractive.findComponent( 'route' );
route.view.on( 'someEvent', someEventHandler );