双向绑定在Ractive.components中不起作用

Question

我想划分一些组件的布局，我使用了Ractive.components。 所有数据在组件中都是正确的并且在其中使用（如id和颜色）。

但是双向绑定的变量没有使用正确。 我有一个javascript行为和三个html布局，并且它们的两个布局不起作用。

JS行为

var config = [
  {id: 1, color: '#cc8'},
  {id: 2, color: '#c88'},
  {id: 4, color: '#8c8'},
  {id: 8, color: '#8cc'}
];

var Panel = Ractive.extend({
  el: document.body,
  template: '#panel',
  data: function() {
    return {
      config: config,
      filters: [4,8]
    };
  },
  components: {
    switcher: function() {return 'Switcher';}
  }
});

var Switcher = Ractive.extend({
  template: '#switcher'
});

Ractive.components.Switcher = Switcher;

var panel = new Panel();

HTML布局1（不起作用）

<script id="panel" type="text/ractive">
    <h4>Doesn't work: {{filters}}</h4>
    {{#each config}}
      <switcher name="{{filters}}">
        filter #{{id}}
      </switcher><br/>
    {{/each}}
    <br/>
  </script>

  <script id="switcher" type="text/ractive">
    <label
      class="switcher"
      style="color:{{color}};">
      <input
        type="checkbox"
        value={{id}}
        name={{name}}
        class="switcher__input">{{>content}}
    </label>
  </script>

HTML布局2（不起作用）

<script id="panel" type="text/ractive">
    <h4>Doesn't work too ("~/"): {{filters}}</h4>
    {{#each config}}
      <switcher name="{{~/filters}}">
        filter #{{id}}
      </switcher><br/>
    {{/each}}
    <br/>
  </script>

  <script id="switcher" type="text/ractive">
    <label
      class="switcher"
      style="color:{{color}};">
      <input
        type="checkbox"
        value={{id}}
        name={{name}}
        class="switcher__input">{{>content}}
    </label>
  </script>

HTML布局3（工作）

<script id="panel" type="text/ractive">
    <h4>Work: {{filters}}</h4>
    {{#each config}}
      <label
        class="switcher"
        style="color:{{color}};">
        <input
          type="checkbox"
          value={{id}}
          name={{filters}}
          class="switcher__input">
          tags #{{id}}
      </label><br/>
    {{/each}}
  </script>

live demo

如何使用双向绑定使Ractive.component正确？

P.S。对不起我的英文..