Question

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

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

向下滚动到第4部分： “单页面应用程序是一个位于单个HTML页面中的Web应用程序。当用户浏览应用程序时，应用程序的”视图“会根据需要注入和删除。 “

我理解创作部分，但是如何从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的函数。

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

Answer 1

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

homeview.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('');

Answer 2

JQuery方法＆＃34; $（＆＃39; body＆＃39;）。html（string）;＆＃34;设置＆＃39; body＆＃39;的内容。在html代码中标记字符串指定的内容。意味着body标签中的先前内容将从DOM中删除。

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

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

JavaScript：动态注入和删除html页面

2 个答案: