如何使用Onsen UI操作DOM

Question

我是Onsen UI的新手，我设法制作了第一个小应用程序（静态的），其中包含几个页面，弹出窗口，列表等。

但是，当我尝试在其中添加动态内容时，它不想合作。

当我单击侧面菜单时，它将调用menu.setMainPage，并且在回调中，我想修改列表的内容（让我们说迭代一个JSON请求并为每个列表添加一个ons-list-item）。 但是，它们看起来没有使用Onsen UI糖霜样式。

我猜是因为menu.setMainPage已经解析了ons-page并在浏览器中显示了它。

有没有办法制作加载页面，更新dom，然后将其传递来显示？

我有一个包含列表的弹出框类似问题。 我想在该列表中添加项目，但我的jQuery附加功能永远无法正常工作。 我猜也是一样。

谢谢！

Answer 1

听起来好像您没有在动态元素上运行ons.compile() 。 将自定义元素添加到DOM后必须对其进行编译，以获取正确的样式和行为。

我举了一个简短的例子来说明这一点：

ons.bootstrap();

var addItem = function() {
  var $myList = $("#my-list"),
      $item = $("<ons-list-item>").text(Math.random());

  $myList.append($item[0]);
  ons.compile($item[0]);
};

如果将addItem函数附加到单击处理程序，则可以将项目动态添加到<ons-list> 。

这是在Codepen上运行的示例： http ://codepen.io/argelius/pen/gbxNEg