组合和扩展Racive组件

Combining and extending Ractive components

本文关键字：组件 Racive 扩展 组合      更新时间：2024-05-03

我开始使用Racive，我想更好地了解如何制作可重复使用的组件。编写一个可以在不同情况下使用的通用小部件非常容易。我的问题是，我的应用程序中的数据通常不是小部件所期望的形状，我不知道如何扩展小部件以使其更特定于应用程序。

举一个具体的例子，比如说我正在写一个Racive组件来设计一个折线图。我会做一些类似的事情

var Chart = Ractive.extend({
  template: chart,
  data: {
    points_to_path: function(points) {
      // whatever
    }
  }
});

使用类似的模板

<svg>
  {{# points_to_path(points) }}
    <path d="{{ path }}" />
  {{/ end of path }}
</svg>

该组件可以像一样使用

var chart = new Chart({
  data: {
    points: [[1, 2], [3, 4], [5, 6]]
  }
});

现在假设我实际上需要使用这样一个组件。可能我的数据不是像上面的points那样由两个组件组成的数组。也许我有更像的东西

[
  {
    date: 'aug 2011',
    value: 12.51
  },
  {
    date: 'sep 2011',
    value: 12.38
  },
  ...
]

因此，我想做的是制作一个更特定于应用程序的Chart，它接受上面形式的数据。我看不到用Chart.extend实现这一点的简单方法，因为对points变量的引用是在chart.html中硬编码的。

在像Backbone这样的框架中，视图是嵌套的，所以我可以将内部小部件封装到一个更大的视图中，并在外部视图中定义数据转换的逻辑。我不太确定从这里到Ractive该怎么走。也许我应该从一开始就用不同的方式设计这个小部件。

更普遍地说，我的问题是我可以用Racive编写小组件，但我不太确定如何将它们组合成更大的组件。

Racive中专门化或扩展组件的惯用方法是什么？或者将许多组件组合成一个更大的应用程序？

有几种可能的解决方案。我不确定什么才是惯用语——一般来说，Racive的哲学是"如果它有效，那就是正确的解决方案！"-我是作者，但随着时间的推移，我会让社区来决定什么是惯用语。

1.初始化时传入函数

如果你使用d3来创建散点图，通常你会做这样的事情：

d3.select( 'circle' ).data( points )
     .enter().append( 'circle' )
       .attr( 'cx', function ( d ) { return d.x; })
       .attr( 'cy', function ( d ) { return d.y; })
       .attr( 'r', 5 );

换句话说，对于数组中的每个数据项，我们提供了一个函数，该函数提取绘制其x和y位置所需的值。

Racive等效方法是在初始化组件时指定一个功能：

<!-- the template -->
<svg>
  <path d='{{ points_to_path(points) }}'/>
</svg>

// let's create a chart component that assumes we get an array
// of points with an `x` and a `y` property
var Chart = Ractive.extend({
  template: chart,
  data: {
    points_to_path: function(points) {
      // is there a 'normalise' function? If so, normalise
      // the data we've been given
      if ( var normalise = this.get( 'normalise' ) ) {
        points = points.map( normalise );
      }
      // turn a normalised `{x: x, y: y}` point into 'x,y'
      var pointToString = function ( point ) {
        return point.x + ',' + point.y;
      };
      // create the SVG path
      return 'M' + points.map( pointToString ).join( ' ' );
    }
  }
});
// now, we need to create a function that tells the Chart
// component how to deal with the data we're about to give it
var chart = new Chart({
  data: {
    points: [[1, 2], [3, 4], [5, 6]],
    normalise: function ( point ) {
      return { x: point[0], y: point[1] };
    }
  }
});

因此，如果你有一个具有date和value属性的点数组，你只需要传递一个normalise函数（或者normalize，如果你喜欢美式拼写…），它会返回{x: point.date, y: point.value}或其他什么。

（当然，如果更容易的话，您可以覆盖整个points_to_path函数。）

2.使用分部

另一种选择是在不同的情况下使用不同的部分：

<!-- widget template -->
<h2>This is a widget</h2>
<div class='contains-dynamic-contents'>
  {{>inner}}
</div>

var widget = new Widget({
  el: 'widgetContainer',
  partials: {
    inner: '<p>This paragraph will appear inside the div</p>'
  }
});

这给了你很大的自由度，但折线图的例子可能更难适应。

内联组件

第一种方法也适用于内联组件——本例假设您使用的是即将发布的开发（0.3.8-pre）版本：

Ractive.components.linechart = Chart;

<div class='application'>
  <h1>This is a chart</h1>
  <linechart points='{{someData}}' normalise='{{someNormaliseFunction}}'/>
</div>

（Protip：您可以使用Chart.data.normalise = someFunction指定默认的normalise功能。）

第二种方法有点棘手——你必须在初始化时动态切换出部分：

Chart = Ractive.extend({
  beforeInit: function () {
    this.partials.inner = ( someCondition ? thisPartial : thatPartial );
  },
  // ...
});

很抱歉这个回复太长了，希望你想要的答案就在这里的某个地方！

相关文章：