Question

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

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

当我单击我的侧边菜单时，它调用menu.setMainPage并在回调中我想修改列表的内容（假设迭代一个JSON请求并为每个请求添加一个ons-list-item）。但是，它们看起来并不像Onsen UI icing。

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

有没有办法做一个加载页面，更新dom，然后传递它才能显示？

我有一个包含列表的popover的simila问题。我想在该列表中添加项目，但我的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

如何使用Onsen UI操作DOM

1 个答案: