使用 Framework7 从 JS 更新 HTML 视图中的数据

Question

如何在 Framework7 中使用 JS 更新已加载的 HTML 视图中的数据。我可以使用 Framework7 将新数据从 JS 加载到新页面，例如通过弹出窗口或通过以下方式创建新页面：

// HTML Content of new page:
var newPageContent = '<div class="page" data-page="my-page">' +
        '<div class="page-content">' +
        JS_VARIABLE +
        '<p>Here comes new page</p>' +
        '</div>' +
        '</div>';

//Load new content as new page
mainView.router.loadContent(newPageContent);

但我不想加载新页面，只是更新当前页面。我试过使用虚拟列表，但我得到一个 "TypeError"，TypeError: o[w].trim is not a function。（在 'o[w].trim()' 中，'o[w].trim' 未定义），这在 Framework7 github 中被报告为一个问题。我根据文档使用虚拟列表，如下所示：

//JS
var myList = myApp.virtualList('.list-block.virtual-list', {
    items: [1,2,3,4],
    height: 44
    });
//HTML
 <!-- Virtual List -->
 <div class="list-block virtual-list">
    <!-- keep it empty -->
 </div>

所以，我 "simply" 想用 div 扩展我的当前页面，它可以保存从 JS 提供和更新的数据。我如何使用 Framework7 做到这一点？

谢谢！

Answer 1

要更新页面中现有元素的数据，您可以使用：

$$('.element-class').html("<div>my new data</div>");

使用 Framework7 从 JS 更新 HTML 视图中的数据

Update data in HTML view from JS using Framework7

html

javascript

html-framework-7