marko-js / marko

A declarative, HTML-based language that makes building web apps fun
https://markojs.com/
MIT License
13.24k stars 643 forks source link

How do you use this with koa? #117

Closed zwhitchcox closed 8 years ago

zwhitchcox commented 8 years ago

It keeps downloading the file. this is the gist of my code.

'use strict';
let koa    = require('koa')
let app    = koa()
app.use(function* () {
    this.body = require('marko').load(require.resolve('./views/index.marko')).stream()
    this.type = 'type/html'
})
app.listen(3000);

Whenever I navigate to localhost:3000/, it downloads a file with "hello" in it. I have no idea what's happening or what I'm doing wrong.

views/index.marko is just

hello

right now.

patrick-steele-idem commented 8 years ago

Hi @zwhitchcox, you might want to try reversing the order of the this.body and the this.type assignments as shown below:

'use strict';
require('marko/node-require').install();

let koa    = require('koa')
let app    = koa()
let template = require('./views/index.marko');

app.use(function* () {
    this.type = 'type/html'
    this.body = template.stream()
})
server.listen(3000);

I don't use Koa, but I suspect that when you assign the stream to this.body that it commits the response body. If that is the case, then the Content-Type header may not be sent correctly.

I also updated your code to use the Node.js require extension :)

Let me know if that does or does not solve your problem.

zwhitchcox commented 8 years ago

No, that. was a good thought, but unfortunately that did not solve my problem. It is still just downloading the file.

zwhitchcox commented 8 years ago

omg...I hate when it's a stupid error like this...had to change type/html to text/html

Thanks for your help!

patrick-steele-idem commented 8 years ago

Doh :)

I bet if the page HTML would have looked like HTML the browser would have been cool with it so it probably didn't help that it only rendered hello.

Globik commented 8 years ago

So is correct: this.type = "html";

Globik commented 8 years ago

Your marko is "simple" enough, but how do I build a binary tree with marko? In ejs template I can just like so using pure javascript write helper functions for a tree hierarchy inner <% functinon buildTree(root){ var html="blablabla"; return html;}%> <%- buildTree(someRoot)%>. But with marko I don't understand how to do it like this. Where is marko's tutos can i find?

patrick-steele-idem commented 8 years ago

Hey @Globik,

Probably better to open a separate Github issue in the future, but I'll try to answer your questions below.

So is correct: this.type = "html";

The following is the correct content type for HTML responses:

this.type = 'text/html; charset=utf-8';

Your marko is "simple" enough, but how do I build a binary tree with marko?

Marko supports macros (inline functions for rendering HTML) and those functions can be called recursively: http://markojs.com/docs/marko/language-guide/#macros

You will want to do something similar to the following:

<def function="renderTree(node)">
    <div class="node">
        <span>${node.value}</span>
        <div class="left">
            <invoke function="renderTree(node.left)" if="node.left"/>
        </div>
        <div class="right">
            <invoke function="renderTree(node.right)" if="node.right"/>
        </div>
    </div>
</div>

<invoke function="renderTree(data.rootNode)"/>

Where is marko's tutos can i find?

Definitely start with the screencasts if you haven't watched those yet: https://www.youtube.com/playlist?list=PLZUgs-F38XXQJBxA58UqnwTVMZS_uza_C

Also check out:

If you think there are particular tutorials that are needed please share by opening a Github issue. Also, please join us in the Gitter chat room and we will be happy to answer any questions you might have: https://gitter.im/marko-js/marko

Globik commented 8 years ago

Many, many thanks, it's just incredible!