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

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
2 participants

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

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

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

Owner

baryshev commented Mar 26, 2013

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

Есть рабочий пример тут 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.

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

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('/*',...)

Owner

baryshev commented Mar 26, 2013

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

Есть 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.

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

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 надо будет подключать?

Owner

baryshev commented Mar 26, 2013

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

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

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

Да, ваш пример работает. Дело было в 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;
    }

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

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

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

 -4

Owner

baryshev commented Mar 26, 2013

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

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

Owner

baryshev commented Mar 26, 2013

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

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

Owner

baryshev commented Mar 26, 2013

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

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

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

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

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

@misterjt misterjt closed this Mar 26, 2013

@misterjt misterjt reopened this Mar 26, 2013

Owner

baryshev commented Mar 26, 2013

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

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

@misterjt misterjt closed this Mar 26, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment