Question

什么时候可以安全地在ractive实例上调用find（...）方法并保证模板已经渲染并且DOM元素可用？

背景

我是RactiveJS的新手，用它构建我的第一个应用程序。我一直在实例化Ractive实例，然后在这些实例上调用find（）等方法来访问从我的模板呈现的元素。像这样：

var ractive = new Ractive({ el: ..., template: ..., data: ..., etc });
var element = ractive.find('.some-template-element');

到目前为止，这一直工作正常，但我想知道我是否可能在这里遇到竞争条件，因为ractive似乎异步渲染模板。编写如上所述的代码是安全的还是我需要将所有内容移动到这样的回调中？

ractive.on('complete', function() {
    var element = ractive.find('.some-template-element');
});

太多信息：

在实践中，当然，我所做的比这个简单的伪代码更复杂。我正在创建使用Ractive作为内部实现细节的“小部件”。现在，我创建了这些小部件，然后开始调用它们的方法。但是如果Ractive方法还没有准备好立即调用，我需要重构我的小部件以暴露一旦我知道我的ractive已经创建并准备好使用就会调用的回调/ promise。

我无法在RactiveJS documentation中找到解释何时可以安全地调用Ractive上的各种函数的详细信息，但我希望我只是错过了一些东西。

Answer 1

假设您提供了el选项，则呈现与new Ractive实例同步发生。

虽然您可以通过ractive.on( 'event', ... )订阅，但使用onevent选项通常更方便，更容易认知：

＆＃13;

var log = [];

var r = new Ractive({
  el: document.body,
  template: '#template',
  data: {
    log: log
  },
  components: {
    'child-component': Ractive.extend({
      template: '<span>child</span>',
      oninit: function() {
        log.push('child component init');
      },
      onrender: function() {
        var span = this.find('span');
        log.push('child component render find span:' + !!span);
      },
      oncomplete: function() {
        log.push('child component complete');
      }
    })
  },
  oninit: function() {
    log.push('parent view init');
  },
  onrender: function() {
    var div = this.find('div'),
      span = this.find('span');
    log.push('parent component render, find div: ' + !!div + ' find span: ' + !!span);
  },
  oncomplete: function() {
    log.push('parent component complete');
  }
});

// these won't fire becasue they already happened! 
r.on('init', function() {
  log.push('view on("init"...)');
});
r.on('render', function() {
  log.push('view on("render"...)');
});

// this will fire because complete is always async.
r.on('complete', function() {
  log.push('view on("complete"...)');
});

＆＃13;

<script src='//cdn.jsdelivr.net/ractive/0.7.3/ractive-legacy.min.js'></script>
<script src='//cdn.jsdelivr.net/ractive.transitions-fade/0.2.1/ractive-transitions-fade.min.js'></script>
<script id='template' type='text/ractive'>
  <div intro='fade'>main view</div>
  <child-component/>{{#log}}
  <li>{{.}} {{/}}
</script>

＆＃13;

RactiveJS - 何时可以安全地调用find（...）

1 个答案: