express.js如何在不使用手柄刷新所有页面的情况下更新UI [英] express.js how to update UI without refresh all page using handlebars

问题描述

这是我第一次使用 express.js 和 Handlebars . 我需要自动完成此字段:<input type="text" id="myInput" autocomplete="on" placeholder="Search here...">.当每个人都输入此文本时，我需要进行一次POST和GET之后，而无需刷新页面中的内容.问题是，当我执行GET时， Handlebars 会刷新所有页面.这是我使用的命令:

It's one of the first time that I use express.js and Handlebars. I need to autocomplete this field: <input type="text" id="myInput" autocomplete="on" placeholder="Search here...">. When everyone digit to this text, I need to make a POST and after a GET without refreshing the content in the page. The problem is, when I do the GET, Handlebars refresh all page. This is the command that I use:

res.render('home',{ items:typeOfCategory}); 

这是hbs的结构:

{{#if items}}
<ul>
{{#each items}} 
<li>{{this.title}}</li>   

{{/each}}
</ul>
{{/if}}

我的问题是:如何避免刷新整个页面? 谢谢

My question is: how to avoid the refreshing of the all page? Thanks

推荐答案

我在另一个教程:我找到了所有问题的答案. 本教程说明如何使用同时管理客户端和服务器端的PJAX库. 多亏了3行代码，您无需重新加载页面即可获得快速导航.

I had read something like that in another question. Based on this tutorial: I found the answer to all my problems. this tutorial explain how to use a PJAX library that manages both the client and server side. Thanks to 3 rows of code you can obtain a speed navigation without reload the page.

1. 从 jQuery-pjax页面
安装客户端库
2. 进入发送请求的html页面，添加:<a href='/yourLink' data-pjax='main'>YourLink</a>

1. Install client side library from jQuery-pjax page
2. into your html page that send the request add: <a href='/yourLink' data-pjax='main'>YourLink</a>

其中main是将满足您更改的div.就我而言:

where main is the div that will content yout change. In my case is:

 <div id="main" class="main">                    
       {{{body}}}                    
 </div>

1. 在your.js文件中添加$('a[data-pjax]').pjax();此命令'只需对包含数据属性'data-pjax''

内部安装使用命令npm install --save express-pjax

设置服务器:

var app = express();
var pjax = require('express-pjax');

...

app.use(pjax())

---

1. 替换普通渲染:

res.render('index', {title: "Index"});

使用

res.renderPjax('index', {title: "Index"});

更新 或者，您可以获得相同的结果.考虑该项目的结构如下:

UPDATE Alternatively you can obtain the same result. Consider that the structure of the project is as follows:

views
  |-> partials
  |      |-> addtest.hbs
  |
  |-> index.hbs

例如，对在index.hbs中具有包含不同项目的侧边栏的图像进行描述，如下所示:

For example, image that in your index.hbs you have a sidebar with different items, described in this way:

<li>
    <a href="#testDB" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
   <img src="../img/database-data.svg" class="svg icon">Test</a>
    <ul class="collapse list-unstyled select-specific" id="testDB">
        <li value="addTest" class=" ">
            <a href="#" id="add-new-test">Add Test</a>
        </li>
         ....
         ....
    </ul>
 </li>

在partials目录中，您有一个简单的表单. 现在，要管理表单，您必须执行两项操作:

Inside the partials directory you have a simply form. Now for manage the form you have to do two operations:

1. 服务器端:要在不刷新页面的情况下从一个部分切换到另一部分，请指定:

1. Server side: For switching from one partial to another without refresh the page, you specify:

router.get('/addtest'，函数(req，res){ res.status(200); res.header("Content-Type"，"text/html"); res.render('partials/addtest'，{title:添加测试"})); });

router.get('/addtest', function (req, res) { res.status(200); res.header("Content-Type", "text/html"); res.render('partials/addtest', {title: "Add Test"}); });

客户端:在客户端文件中，添加一个简单的获取请求:

Client side: In your client side file, you add make a simple get request:

$('#add-new-test').click(function(event){ $ .get('/addtest').then(function(data){ $('#main').html(data); }); });

$('#add-new-test').click(function (event) { $.get('/addtest').then(function (data) { $('#main').html(data); }); });

通过这种方式，当您使用相同的地址(即本例中为/addtest )发出get请求时，客户端会在视图内部添加部分代码，而不会全部刷新.

In this way, when you make a get request with the same address (i.e in this case /addtest) the client add a part of code inside your view without refresh all.

注意:请记住，如果需要部分文件file.js，请使用以下文件加载文件:

NOTE: Keep in mind that, if you needed a some file.js in your partial, for load the file, use this:

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

这用于避免:Synchronous XMLHttpRequest on the main thread is deprecated…，因为调用是异步的.有关更多信息..

This is used for avoid: "Synchronous XMLHttpRequest on the main thread is deprecated…" because the call is asynchronous. For more info..

这篇关于express.js如何在不使用手柄刷新所有页面的情况下更新UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！