Question

我尝试将每个部分的数据分开，以便数据不会全局混合/覆盖。

问题是当部分数据发生变化时，主模板不会重新渲染。

到目前为止，我所做的最好的工作是让主要容器中的部分重新渲染，而不是在主模板本身内。

我错过了什么吗？

以下是代码（也在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。但请注意，数据仍将驻留在同一实例中。在下面的示例中，partial将“John Doe”作为数据。但在第二次部分使用中，我们强制使用jane对象，使其first使用last和jane。

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：具有（动态）本地数据的部分

1 个答案: