Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Как использовать на клиенте без подключения Coffee-Script? #23

Closed
misterjt opened this issue Mar 26, 2013 · 16 comments

Comments

@misterjt
Copy link

Я уже понял что то про MIddleWare, но не совсем понятно как его реализовать с express.
В данный момент у меня вот такая конструкция

app.use(ECT.compiler({ root: '/view' }))
app.all('/*',function(request,response){
    new rootController(request,response);
}); 

Но запрос /vew/template.html все равно берет на себя последняя конструкция.
Пожалуйста, помогите правильно сделать?

@baryshev
Copy link
Owner

Тут немного не верно указаны параметры.

Есть рабочий пример тут https://github.com/baryshev/ect/blob/master/examples/compiler.js

В Вашем случае нужно примерно так:

app.use('/view', ECT.compiler({ root: __dirname + '/view' }))
app.all('/*',function(request,response){
    new rootController(request,response);
});

Параметр root это путь к папке где хранятся шаблоны на диске. А первый параметр в .use это base-url для шаблонов.

Например если root будет /home/myapp/views а подключён compiler будет через .use('/templates', ECT.compiler(, то шаблон по URL example.com/templates/tpl.html будет браться по этому пути: /home/myapp/views/tpl.html

Для надёжности параметр root нужно делать абсолютным, на случай изменения cwd поэтому в примере указан __dirname.

@misterjt
Copy link
Author

К сожалению этот пример не работает.
Вот код моего приложения.

require('./Initialization.js');
app=express();
app.use(express.cookieParser());
app.use(express.bodyParser());
app.use('/view', ECT.compiler({ root: __dirname + '/view' }))
app.all('/*',function(request,response){
    new rootController(request,response);
}); 
app.listen(8880,"127.0.0.1");

Все равно запрос /view/template.html обрабатывается конструкцией app.all('/*',...)

@baryshev
Copy link
Owner

Извиняюсь. Я сам немного ошибся.

Есть 2 сущности:

  1. Объект ECT, который создается точно также, как если бы он использовался для простого рендеринга на сервере.
  2. Middleware, который создается методом объекта ECT (1 сущности).
var ECT = require('ect'); // Подключаем ECT
var renderer = ECT({ root : __dirname + '/view', ext : '.html', watch: true }); // Создаем объект ect (тут root - это путь к папке с шаблонами на диске)
app.use(renderer.compiler({ root : '/view', gzip: true })); // Подключаем middleware (тут root это base-url)
// app.use('/view', renderer.compiler({ gzip: true })); // Это тоже самое, что и предыдущая строка, только base-url задается средствами express а не middleware.

@misterjt
Copy link
Author

Поменял код. К сожалению, ситуация все та же.

require('./Initialization.js');
app=express();
app.use(express.cookieParser());
app.use(express.bodyParser());
global.ECT= ect({ root: __dirname + '/view', watch: true });
app.use(ECT.compiler({ root : '/view', gzip: true })); // Подключаем middleware (тут root это base-url)
app.all('/*',function(request,response){
    new rootController(request,response);
}); 
app.listen(8880,"127.0.0.1");

Видимо не судьба мне рендерить шаблоны на сервере... неужели Coffee-Script надо будет подключать?

@baryshev
Copy link
Owner

Вот только что проверил у себя такой же код:

var express = require('express');
var app = express();
var ect = require('ect');
app = express();
app.use(express.cookieParser());
app.use(express.bodyParser());
global.ECT = ect({ root: __dirname + '/view', watch: true });
app.use(ECT.compiler({ root : '/view', gzip: true })); // Подключаем middleware (тут root это base-url)

app.all('/*',function(request,response){
   response.end('Hello, World!');
});
app.listen(3000);

Структура файлов:

view
|_template.html
app.js

URL: http://127.0.0.1:3000/view/template.html

Отдает скомпилированный шаблон.

@misterjt
Copy link
Author

Да, ваш пример работает. Дело было в Nginx.
Было вот так

location ^~ /view {
            proxy_pass http://127.0.0.1:8880/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
    }
    location / {
            proxy_pass http://127.0.0.1:8880/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
    }

А надо вот так

location ^~ /view {
            proxy_pass http://127.0.0.1:8880/view;# Вот здесь надо проксировать именно на view
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
    }
    location / {
            proxy_pass http://127.0.0.1:8880/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
    }

Спасибо большое за помощь

@misterjt
Copy link
Author

Не поверите... теперь на клиенте проблемы.
 -3

Скомпилированное содержимое modal.window.html

 -4

@baryshev
Copy link
Owner

Версия ECT на клиенте последняя? У меня всё работает нормально.

@misterjt
Copy link
Author

Вчера скачал ECT вот отсюда https://github.com/baryshev/ect/blob/master/ect.min.js
Подключен только этот один файл. Может чего то не хватает?
 -5

@baryshev
Copy link
Owner

Похоже у Вас старая версия ECT на сервере. Скомпилированная функция не окружена скобками. Это было недавно исправлено.

@misterjt
Copy link
Author

Да, проблема была именно в этом. А не подскажете, данные с сервера загружаются синхронно?

@baryshev
Copy link
Owner

Да, загрузка шаблона происходит синхронно.

@misterjt
Copy link
Author

AJAX.open("GET",file,false)

Увидел уже. А почему сделано так? Если ответа от сервера не будет долго, страница перестанет реагировать на действия пользователя до момента получения данных. Это как-то не религиозно.

@misterjt
Copy link
Author

Можно попросить вас изменить?
Даже готов код предоставить

AJAX.open("GET",file,true)
if(typeof callback=="function"){
AJAX.onreadystatechange = function() {
        if (AJAX.readyState == 4 && AJAX.status == 200) {
            callback(AJAX.responseText);
        }
    }
}

@misterjt misterjt reopened this Mar 26, 2013
@baryshev
Copy link
Owner

Там вся система будет сильно усложнена, если применить асинхронную загрузку. Это касается инклудов и наследований внутри шалона. Сейчас можно внутри шаблона написать <% include 'user.html' %>. Работая синхронно такой шаблон чень легко и быстро можно собрать в готовую строку. С асинхронным вариантом несколько сложнее, т.к. нужно оставлять заглушки для вставок и дожидаться их загрузки и только потом расставлять на места. Также прис инхронном вполнении можно загрузить результат include в переменную внутри шаблона и обработать её. Такой подход работает быстрее из за более простого кода, Количество плюсов в целом превышает количество минусов. Долгая загрузка шаблона с сервера это довольно редкое явление, так как шаблоны, как правило, маленькие. При необходимости - можно загрузить шаблоны во время инициализации приложения и они закешируются в памяти и их повторная загрузка не потребуется, код будет работаь с кешем.

@misterjt
Copy link
Author

Спасибо вам большое, Вадим. Вы мне очень помогли сегодня.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants