2

我想为一些组件划分布局，我使用了 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>

和现场演示

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

PS对不起我的英语..

4

0 回答 0