如何使用温泉 DOM UI

Question

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

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

当我点击我的侧边菜单时，它调用 menu.setMainPage 并且在回调中我想修改列表的内容（假设迭代一个 JSON 请求并添加一个 ons-list-他们每个人的项目）。然而，它们看起来不像温泉 UI 糖霜。

我想这是因为 menu.setMainPage 已经解析了页面并在浏览器中显示了它。

有没有办法做一个加载页面，更新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

如何使用温泉 DOM UI

How to manipulate the DOM with Onsen UI

javascript

jquery

dom

onsen-ui