RactiveJS：具有（动态）本地数据的部分

Question

我试图将每个部分的数据分开，这样数据就不会 mix/overwrite 全局。

问题是部分数据改变时主模板没有重新渲染。

到目前为止，我所做的最好的事情是让部分在主容器中重新呈现，而不是在主模板本身中。

我是不是漏掉了什么？

这是代码（也在 JS Bin 上）：

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
        <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
        <script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
    </head>
    <body>
        <div id="main"></div>
    </body>
</html>

JS:

var partial = new Ractive({
        template: '{{name.first}} {{name.last}}',
        oninit: function () {
            this.observe( function ( newValue, oldValue, keyPath ) {
                console.info( 'newValue = %o, oldValue = %o, keyPath = %s', newValue, oldValue, keyPath );
            });
        },
        data: {
            name: {
                first: 'John',
                last : 'Doe'
            }
        }
    }),

    main = new Ractive({
        el: '#main',
        // template: 'Hello {{name}}!',
        template: 'Hello {{>partial}}!',
        partials: {
            partial: function ( p ) {
                // 1) Not working...
                // return '{{name.first}} {{name.last}}';

                // 2) ...also not working...
                // return partial.template;

                // 3) ...still not working...
                // return ( p.isParsed( partial.template ) ) ? partial.template : p.parse( partial.template );

                // 4) Kind of working... (static - does not re-render)
                // return partial.toHTML();

                // 5) Kind of working... (returning Promise!)
                return partial.render( this.el );
            }
        },
        data: {
            name: 'John Doe'
        }
    });

// partial.set( 'name.first', 'Jane' );

Answer 1

您有两种方法可以做到这一点。首先，你仍然可以使用 partials，但是 you force the context of the partial。但是请注意，数据仍将驻留在同一实例中。在以下示例中，部分选择 "John Doe" 作为数据。但是在第二次部分使用中，我们将 jane 对象强加给它，使其使用 jane.

中的 first 和 last

var main = new Ractive({
  el: '#main',
  template: 'Hello {{>personPartial john}} and {{>personPartial jane}}!',
  partials: {
    personPartial: '{{first}} {{last}}'
  },
  data: {
    first: 'John',
    last : 'Doe',
    jane: {
      first: 'Jane',
      last : 'Dee'
    }
  }
});

main.set( 'jane.name.first', 'Jen' );

如果真的完全分离数据，consider using components instead。在这种情况下 John 和 Jane 是它们自己的组件。但是请注意，如果一个组件缺少数据（比如 John 没有 first），它将在父级 (main) 中查找该数据。如果它恰好在那里，它将使用它（在本例中为 foo）。您可以使用 isolated:true 来防止这种行为，例如 Jane。您还可以通过属性显式地将数据从父级传递给子级。

var John = Ractive.extend({
  template: 'Hello {{first}} {{last}}!',
  data: {
    last: 'Doe'
  }
});

var Jane = Ractive.extend({
  isolated: true,
  template: 'Hello {{first}} {{last}}!',
  data: {
    first: 'Jane',
  }
});

var Jay = Ractive.extend({
  isolated: true,
  template: 'Hello {{first}} {{last}}!'
});

var main = new Ractive({
  el: '#main',
  template: 'Hello {{>person}}! <john /> <jane /> <jay first="{{first}}" last="{{last}}" />',
  partials: {
    person: '{{first}} {{last}}'
  },
  components: {
    john: John,
    jane: Jane,
    jay: Jay
  },
  data: {
    first: 'foo',
    last: 'bar'
  }
});

RactiveJS：具有（动态）本地数据的部分

RactiveJS: Partials with (dynamic) local data

ractivejs