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 ... */})

当路由为/ widget2时导航到/ widget1和widget2时会显示widget1，

根据当前路线交换小部件的最佳方法，而不创建单独的根Ractive或隐藏/显示小部件？感谢。

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

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

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

Answer 2

一种方法是在顶级模板中明确包含代表每条路线的组件：

<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()将返回一个在任何转换完成时完成的承诺 - 尽管仍然会支持回调。）

说了所有我有兴趣了解人们取得成功的其他模式。

Ractive，组件和路由

2 个答案: