2

假设我在页面上有一个根 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 或隐藏/显示小部件的情况下，根据当前路线交换小部件的最佳方法是什么？谢谢。

4

2 回答 2

9

我之前建议的另一种解决方案，它允许以更动态的方式设置路由（即无需预先在模板中声明它们）：

<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>"});

...等等。如有必要，您可以通过检索引用与每个视图对象进行交互：

route = ractive.findComponent( 'route' );
route.view.on( 'someEvent', someEventHandler );
于 2014-03-20T19:40:30.790 回答
1

一种方法是在顶级模板中显式包含表示每个路由的组件：

<nav>...</nav>

{{# route === 'widget1' }}
  <widget1/>
{{/ route === 'widget1' }}

{{# route === 'widget2' }}
  <widget2/>
{{/ route === 'widget2' }}

然后，您可以执行以下操作：

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

这将拆除现有的路由组件并创建新的路由组件。

如果您的路由组件具有异步转换，您可以通过执行以下操作确保在任何转换完成之前新路由不会替换旧路由：

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

（请注意，从 0.4.0 版开始，ractive.set()将返回一个承诺，当任何转换完成时都会履行 - 尽管仍将支持回调。）

说了这么多，我很想听听人们成功使用的任何其他模式。

于 2014-03-20T18:21:33.410 回答