Solved thread

This post is marked as solved. If you think the information contained on this thread must be part of the official documentation, please contribute submitting a pull request to its repository.

using javascript to load volt template

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. :)



5.8k
Accepted
answer
edited 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



78.8k
edited Feb '18

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