如何制作adonis.js视图?

时间:2016-04-03 09:28:57

标签: javascript html frameworks views adonis.js

我刚开始使用adonisjs以使网站动态化,用块替换重复元素。在这种情况下,我正在使用视图。问题是,我无法理解我做错了什么。我有一个名为mainpage.html的html页面和adonis.html。 在mainpage.html

<!DOCTYPE html>

{# resources/views/mainpage.html #}
<html lang="en">
<head>
<title>NextAnime</title>
</head>
<body>
{% block latestEntries %}
{% endblock %}
</body>
</html>

在adonis.html中

{# resources/views/adonis.html #}
{% extends 'mainpage' %}

var rangeEntries = [0,1,2,3,4]

{% block latestEntries %}

    {% for i in range %}
    <div class="row">
        <div class="col-xs-3">
            <a href="anotherpage.html"><img src="../../public/images/justanimage.jpeg" id="latest_entry_image" alt="Some problem"></a>
        </div>
        <div class="col-xs-9">
            <a href="anotherpage.html">name of anime</a>
            <p>Chapters/Volumes :</p>
            <p>Date</p>
        </div>
    </div><br>
{% endfor %}
{% endblock %}

PS:官方文档不清楚{%extends''%}部分。我是否在HomeController.js文件(主要)中放置了html文档(主页)的名称或我指定的别名?

在HomeController.js中:

class HomeController {

  * index (request, response) {
    const view = yield response.view('adonis')
    response.send(view)
  }
  * main (request, response) {
    const view = yield response.view('mainpage')
    response.send(view)
  }
}

最后,我知道当我到达一般列表的末尾时,请在adonis中。

1 个答案:

答案 0 :(得分:1)

I tried out the following two cases:

  • Changed the name of the html document (changed it to mainpage1.html) but did not change the name in the {% extends '' %} (kept it as mainpage).
  • Changed the name in the {% extends '' %} (changed it to mainPage1 but the template name is mainPage.html).

From what I tried out, I understood the following:

  • You will have to put the name of the template with out the '.html' extenstion while extending a template (in this case 'mainPage.html' and while extending {% extends 'mainPage' %}). When the controller sends a response using response.send(view), it gets the template from the resources/views/ directory using the template name excluding the .html extension.

Please try out the different methods related to template extension and inclusion.