Marko.js data on the browser

[Christoforos Korifidis]

Hello,

I am trying to render template on the borwser, but I want to pass the data to the template on the borwser throught javascript.

I am new to node.js and I am trying 3 days to achieve it, nbut on luck.

I have tried the documentation on the https://github.com/raptorjs/marko but I can't make ti work. I think that the documentation is taklking about injecting the data on the serverside and doing just rendering on the client side.

I red on the FAQ section that for precompiled templates I only need the runtime module. 

But I cant see how can I load the runtime module and I haven't find a way to reference my template from javascript e.g renderdHTML = mytpml.render(data, out);

thanks for any help in advance 

[Patrick Steele-Idem]

Hi Christoforos,

Welcome to Node.js! The key thing is that you must use a CommonJS module bundler to transport and run your JavaScript modules in the browser. A CommonJS module bundler is what allows your Node.js-style code to work in the browser by wrapping your JavaScript code and it provides a module runtime. Marko templates compile down to CommonJS modules so that they can be "required" just like any other JavaScript module. A JavaScript module bundler will automatically bundle any required module by analyzing your JavaScript code. A CommonJS module bundler will bundle up all of your JavaScript into a JavaScript file that can be included in your HTML page and it will then your app in the browser when the page is loaded. My recommendation is to use Lasso.js, but you can also use Browserify to build the JavaScript bundles.

Are you using Express or some other server or are you building a server-less single page app?

Also, feel free to post questions to our Gitter chat room or message me directly on Gitter if you need more assistance. I'm happy to answer questions here as well, but we can probably help you easier over chat.

Happy coding!

--Patrick

[Christoforos Korifidis]

hello again, thanks for the answer.

I am using xampp and php pages.

I am requesting the data from server thorugh ajax call. When I get the data back on the client, I want to inject those data into the template and then render it.

I have understand that I have to bumdle my js code. Although I havent been able to install lasso.js because of a problem with node versiom,  but I wil fix this.

Anyway when I bundle my js and send them to the client, then I need to inject data form ajax call into the template and render the template. That is what I can not figure out and I can't find some example for this.

[Patrick Steele-Idem]

Hi Christoforos,

Hopefully this helps clarify:

// Our template and the marko runtime will automatically be bundled

// by the CommonJS module bundler

var template = require('marko').load(require.resolve('./template.marko'));

/**

 * A client-side widget that is bound to an HTML DOM element. One or more

 * instances of this Widget will be created when the app is

 * bootstrapped up in the browser.

 * 

 * @param {HTMLElement} el The DOM element that the widget is bound to

 */

function Widget(el) {

    this.el = el;

}

Widget.prototype = {

    /**

     * Makes an AJAX call to the server to get new data and then

     * renders a template with the data and injects the HTML into

     * the DOM by assigning the html to this.el.innerHTML

     */

    updateView: function() {

        // Make an AJAX call to get JSON data from the server

        $.getJSON("/api/my-data", function(data) {

            

            // Now render the template using the data that was returned

            // from the server

            template.render(data, function(err, html) {

                // Add the HTML to the DOM by assigning it to this.el.innerHTML

                this.el.innerHTML = html;                

            });

        });

    }

};

module.exports = widget;

Also, you should check out Marko Widgets which provides functionality for binding client-side behavior to rendered UI components: https://github.com/raptorjs/marko-widgets/tree/view-state

Please let us know if you still have questions.

--Patrick

[Christoforos Korifidis]

thanks a lot !

it's pretty clear now, only I have to learn how the bundler works, but I think I can manege that.

thaks for your time !

it was really helpfull.