Question

渲染后如何在Meteor模板中大写小a？

我尝试了什么：

Meteor的LiveRange对象有一个visit()方法。有了它，我可以访问模板的所有渲染DOM节点。对于每个DOM文本节点，我在访问者中修改其数据。

然而！如何获取模板的LiveRange对象？

在模板rendered()的回调this中是模板实例。它在名为LiveRange的成员中有一个_spark_kEezuQToKtbuQw3Xw对象。这看起来像Meteor不喜欢有人访问这个成员。

如何以令流星神喜悦的方式获取模板的LiveRange对象？

在你问为什么我会做一个愚蠢的事情，比如大写所有的“a”：它很复杂。实际上我想在模板中的所有DOM文本节点上执行搜索和替换，因为我试图将一个横切关注点应用于Meteor应用程序中的几个模板。

Answer 1

你对模板中a的位置有任何限制吗？

例如，这就是你在模板中所有SPAN中所有a的大写：

Template.complicated.rendered = function() {

    this.findAll('span').each(function(idx, element) {
        $(element).html( $(element).html().replace(/a/g, 'A');
    });

};

如果要遍历所有顶级节点，可以这样做：

Template.complicated.rendered = function() {
  var node = this.firstNode;

  while(true) {

    // manipulate with node
    //
    // for example, get all text nodes within in
    // and replace a's with A's

    if(node === template.lastNode) return;
    node = node.nextSibling;
  }
}

但是，您需要小心此方法并仅替换叶节点的内容。如果您更改了a，则可以更改您不想更改的链接网址。此外，更改所有DOM，而不仅仅是文本节点内容，可能会激怒流星之神。

编辑：结合How do I select text nodes with jQuery?，此代码将覆盖模板中所有文本节点中的所有内容：

Template.complicated.rendered = function() {
  var node = this.firstNode;

  while(true) {

    _.each(getTextNodesIn(node, false), function(textNode) {
      textNode.nodeValue = textNode.nodeValue.replace(/a/g, 'A');
    });

    if(node === template.lastNode) return;
    node = node.nextSibling;
  }
}

Meteor模板中的大写“a”

1 个答案: