Question

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

举一个具体的例子，假设我正在编写一个Ractive组件来设计折线图。我会按照

的方式做点什么

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继续这里。也许我应该从一开始就以不同的方式设计小部件。

更一般地说，我的问题是我可以在Ractive中编写小组件，但我不太确定如何将它们组成更大的组件。

Ractive专业化或扩展组件的惯用方法是什么？或者将许多组件组合成更大的应用程序？

Answer 1

有几种可能的解决方案。我不确定什么是合格的 - 一般来说，Ractive的理念是'如果它有效，那就是正确的解决方案！' - 我是作者，但是我会留给社区来决定什么是惯用的。

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

换句话说，对于数组中的每个 ~~datum~~ 项，我们提供了一个函数，它提取绘制x和y位置所需的值。 / p>

Ractive等价物是在初始化组件时指定一个函数：

<!-- 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。使用partials

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

<!-- 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>'
  }
});

这为您提供了很大的自由，但折线图示例可能更难以适应。

内联组件

第一种方法也适用于inline components - 此示例假设您正在使用即将发布的开发（0.3.8-pre）版本：

Ractive.components.linechart = Chart;

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

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

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

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

很抱歉这个回复的篇幅很长，希望你想要的答案就在这里！

组合和扩展Ractive组件

1 个答案:

1。在初始化时传递函数

2。使用partials

内联组件