Question

我正在尝试动态附加子riot.js标签，具体取决于API调用的结果。每当我尝试使用jquery的.append()函数附加这些标记时，DOM都不会更新。我尝试了在这个github线程上描述的以下方法（这对我不起作用）：

https://github.com/riot/riot/issues/2279

var myTag = document.createElement('my-tag')
$('#container').append(myTag)
riot.mount(myTag)

以下是我正在尝试做的简化示例（下面列出的代码）：https://jsfiddle.net/7m2z7cus/12/

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://rawgit.com/riot/riot/master/riot.min.js"></script>
  </head>
  <body>
    <foo></foo>
    <script>
      riot.tag('bar', '<h1>hello</h1>', '', '', function(opts) { });
      riot.tag('foo', '<div id="bars"></div>', '', '', function(opts) {
        var bar = document.createElement('bar');
        $('#bars').append(bar);
        riot.mount(bar);
      });
      riot.mount('foo');
    </script>
  </body>
</html>

我希望#bars div附加一个bar标记，在屏幕上显示“Hello”，但它不存在。该页面是空白的。我应该如何动态附加嵌套标签，如上例所示？

Answer 1

您要做的事情是完全可能的，您的实施非常接近工作。

您唯一缺少的是标记foo需要完全挂载才能引用标记内的DOM节点，即尝试引用$('#bars')不会引用任何内容foo {1}}未完全安装。

因此，为了使其正常工作，您需要在安装bar之后创建并附加标记foo，这是通过使用'mount'事件完成的对于标记foo。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://rawgit.com/riot/riot/master/riot.min.js"></script>
  </head>
  <body>
    <foo></foo>
    <script>
      riot.tag('bar', '<h1>hello</h1>', '', '', function(opts) { });
      riot.tag('foo', '<div id="bars"></div>', '', '', function(opts) {
        this.on('mount', function() {
          // foo has fully mounted. DOM Nodes are accessible inside this callback
          var bar = document.createElement('bar');
          $('#bars').append(bar);
          riot.mount('bar');
        })

      });
      riot.mount('foo');
  </script>
</body>

这里是JSFiddle：https://jsfiddle.net/ypwwma2s/

DOM不会更新附加了JQuery

1 个答案: