0

У меня есть это базовое приложение koa v2, в котором я пытаюсь реализовать шаблонные литералы в качестве механизма просмотра. В ./views/index.js как я могу заполнить значение state от app.js?Почему невозможно изменить значение объекта в модуле CommonJS?

Моя проблема заключается в том, что я хочу, чтобы раздвинуть значения объекта из ctx.body = index.render({}) вплоть до .views/partials/mainTop.js файла, где скажем, я хочу, чтобы включить title значение объекта между <title></title> тегами. Есть ли способ достичь этого, не требуя .views/partials/mainTop.js в app.js? Я хочу добиться аналогичной работы с шаблонами, если бы это были рули или шаблоны nunjucks.

./app.js

const index = require('./views/index'); 
const app = new Koa(); 

app.use(ctx => { 
    index.state = { 
    foo: 'bar', 
    }; 
    ctx.body = index.render({ 
    title: 'Template Literals', 
    description: 'Vanilla JS rendering', 
    }); 
}); 

app.listen(3000); 

./views/index.js

const main = require('./layouts/main'); 

let state = {}; 
module.exports.state = state; 
console.log(state); // returning an {} empty object, expected => { foo: "bar" } 

module.exports.render = (obj) => { 
    return main.render(` 
    <p>Hello world! This is HTML5 Boilerplate.</p> 
    ${JSON.stringify(obj, null, 4)}} 
    ${obj.title} 
    `); 
}; 

./views/layouts/main.js

const mainTop = require('../partials/mainTop'); 
const mainBottom = require('../partials/mainBottom'); 

module.exports.render = (content) => { 
    return ` 
    ${mainTop.render} 

    ${content} 

    ${mainBottom()} 
    `; 
} 

./views/partials/mainTop.js

const render = ` 
    <!doctype html> 
    <html class="no-js" lang=""> 
    <head> 
    <title></title> 
    ... 
`; 
module.exports.render = render; 

./views/partials/mainBottom.js

module.exports =() => { 
    return ` 
    ... 
    </body> 
    </html> 
    `; 
} 
+1

не знаю. вы можете определить доступный для всех метод, чтобы вернуть значение или, в крайнем случае, использовать глобальный. – dandavis

+0

Интересно, почему 'mainTop' определяется как объект со строковым свойством, а' mainBottom' определяется как функция, возвращающая строку. – Bergi

ответ

1

console.log(state); // возвращая {} пустой объект, ожидаемый =>{ foo: "bar" }

Конечно, вы получаете вы только что создали пустой объект:

  • это module.exports.state pr Операция, которая получает назначение в app.js. Ваша локальная переменная state не перезаписывается, и объект не относится к мутированному. Для этого вам нужно будет сделать index.state.foo = "bar"; в index.js.
  • объект/переменная регистрируется сразу же после ее создания в качестве пустого объекта. Назначение в index.js происходит асинхронно, внутри обратного вызова app.use. Если вы сделали console.log внутри метода рендеринга, который называется после назначения, вы получите значение, как ожидалось. Однако в этом случае вы, вероятно, должны просто передать его в качестве параметра.