0

我正在开发一个 Phonegap/Cordova 应用程序并遇到严重的性能问题。我正在研究一个教程，作者建议使用 JavaScript 动态创建 html 页面。

这是教程的链接： http: //coenraets.org/blog/phonegap-tutorial/

向下滚动到第 4 部分：“单页应用程序是存在于单个 HTML 页面中的 Web 应用程序。当用户在应用程序中导航时，应用程序的“视图”会根据需要注入到 DOM 中并从 DOM 中删除。 ”

我了解创建部分，但是如何从 DOM 中删除页面？？？

Christopher Coenraets 的代码：

renderHomeView: function() {
  var html =
        "<div class='header'><h1>Home</h1></div>" +
        "<div class='search-view'>" +
        "<input class='search-key'/>" +
        "<ul class='employee-list'></ul>" +
        "</div>"
  $('body').html(html);
  $('.search-key').on('keyup', $.proxy(this.findByName, this));
},

初始化函数：

initialize: function() {
  var self = this;
  this.store = new MemoryStore(function() {
     self.renderHomeView();
  });
}

我没有看到任何在渲染 HomeView 后删除它的函数。

请帮我解决这个问题，因为我已经研究了好几天了

4

2 回答 2

2

首先，使用您的内容创建一个 *.html 页面。将其存储在根目录为 /html/homeview.html

主页视图.html

    <div class='header'>
       <h1>Home</h1>
    </div>
       <div class='search-view'>
       <input class='search-key'/>
       <ul class='employee-list'></ul>
    </div>

index.html，你已经：

     <div class="homeView"></div>

并实现 jQuery ajax 或简单的 $.get() ：

  $(document).ready(function() {
     $.get('html/homeView.html')
         .done(function(data) { //this is homeView's HTML content
             $('.homeView').html(data);
         })
         .fail(function(error) {
             console.log(error);
         })
   })

删除其内容

    $('.homeView').html('');
于 2014-09-29T09:19:05.367 回答
1

JQuery 方法“$('body').html(string);” 将 html 代码中的“body”标签的内容设置为字符串指定的任何内容。这意味着 body 标记内的先前内容将从 DOM 中删除。

您还可以使用另一个名为 remove() 的 JQuery 方法从 DOM 中删除特定元素。这是他在教程后面实现html页面之间滑动时使用的方法。

您链接到http://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html的教程有更新版本。

于 2014-09-29T19:33:20.477 回答