using javascript to load volt template

Question

using javascript to load volt template

nanoex35 Feb '18

Created Feb '18	Last Reply Feb '18	Replies 1	Views 518	Votes 0

nanoex35 602

Feb '18

Hello! I'm using Phalcon's volt templating engine and I got a little "issue", as follows:

In the controller I'm calling a service to fetch a json object with data and I'm throwing it in volt. Here, I have something like this:

{% for item in serviceData %}
    {{ partial('index/index', ['item' : item]) }}
{% endfor %}

Right now I have a template container that is filled for every item fetched, but I'd like to show a limited number of containers. Also, I want to create a button that will load +x containers on every press. There's no need for asynchronous calls, so I would like to use just JavaScript since the data is already provided.

Any ideas on how should I proceed? Any piece of advice would be highly appreciated!

P.S: I hope that I was clear enough on what I want to do. :)

Cosimo
12.1k

Accepted
answer

edited Feb '18
Feb '18

You can use this solution if you don't need asynchronous calls: https://jsfiddle.net/kiirosora/jn8VW/314/

But I'm curious to know how a situation like this can be managed in an asynchronous call too

Izo · Answer 1 · 2018-02-15T14:55:02-07:00

you can't really interact with volt

but you can seperate your containers are render them backend side


$this->di->set('simpleView', function ($dir, $trim = true) use ($config) {

            $eventsManager = new EventsManager();
            $view = new \Phalcon\Mvc\View\Simple();

            $view->setViewsDir($dir);

            $view->registerEngines([
                '.phtml' => function ($view, $di) use ($config) {

                    $phtml = new \Phalcon\Mvc\View\Engine\Php($view, $di);

                    return $phtml;
                },
                '.volt'  => function ($view, $di) use ($config) {

                    $volt = new  \Phalcon\Mvc\View\Engine\Volt($view, $di);
                    $volt->setOptions([
                        'compileAlways' => true,
                        'compiledPath'  => APP_PATH . "/volt/"
                    ]);

                    $compiler = $volt->getCompiler();
                    $compiler->addFunction("money_format", "money_format");
                    $compiler->addFunction("number_format", "number_format");
                    $compiler->addFunction("hashIds", function ($resolvedArgs, $exprArgs) {

                        return $this->getShared("hashIds")
                            ->encode($resolvedArgs);
                    });

                    $compiler->addFunction('_', function($resolvedArgs, $exprArgs) {

                        return '$this->getDI()->getShared("getTranslationMessages")->_(' . $resolvedArgs . ')';
                    });

                    return $volt;
                }
            ]);

then u can use it

    $simpleView = $this->di->get("simpleView", [ $this->config->particialDir ]);
    $html = $simpleView->render($"myvolt.volt, [..data..]);

rest is js if u ned help with that let me know :D