如何使用 Onsen UI 操作 DOM答案

【问题标题】：How to manipulate the DOM with Onsen UI如何使用 Onsen UI 操作 DOM
【发布时间】：2015-01-30 22:29:38
【问题描述】：

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

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

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

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

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

我有一个包含列表的弹出框的类似问题。我想在该列表中添加项目，但我的 jQuery 追加永远不会工作。我想也是一样的原因。

谢谢！

【问题讨论】：

标签： javascript jquery dom onsen-ui

【解决方案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

【讨论】：

这正是我所缺少的！非常感谢！