问RactiveJS -什么时候打电话给find(.)
EN

Stack Overflow用户

提问于 2015-08-18 16:57:01

回答 1查看 95关注 0票数 0

什么时候打电话给查找处是安全的(.)方法，并确保模板已经呈现并且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作为内部实现细节的“小部件”。现在，我创建这些小部件，然后开始对它们调用方法。但是，如果ractives还没有准备好立即调用，我将需要重构我的小部件，以公开回调/承诺，这些回调/承诺一旦我知道我的ractives已经创建并准备好使用，就会被调用。

我还没有在RactiveJS文档中找到详细信息来解释何时调用RActive上的各种函数是安全的，但我希望我只是遗漏了一些东西。

ractivejs

腾讯云OCR文字识别特惠

文字识别限时抢购，热门产品低至14.9元

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-18 18:25:17

假设您提供了一个el选项，呈现将与new Ractive实例化同步进行。

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

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: ' + + ' 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"...)');
});

<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>