A
A
Alex_proger2017-01-25 23:04:28
JavaScript
Alex_proger, 2017-01-25 23:04:28

How to connect JST template to MarionetteView?

Good evening!
I compile the JST template and insert its code before the View

<div id="review_template">
  <% _.each( items, function( item ){ %>
    <div class='col-md-6 name-rev'>
      <p class="text"><strong><%- item.clientName %></strong></p>
    </div>
    <div class='col-xs-12 wrap' style='margin-bottom: 15px; padding: 10px 10px 5px 10px;'>
      <div class='col-md-6 time-rev'>
        <p class="text"><strong><%- item.id %></strong></p>
      </div>
      <br>
      <hr style='margin-top: 5px; margin-bottom: 5px;'>
      <div class='col-md-12'>
        <p class="text"></p>
      </div>
    </div>
  <% }); %>
</div>

The compiled template looks like this:
(function() {
window["JST"] = window["JST"] || {};

window["JST"]["reviews.jst"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
with (obj) {
__p += '<div id="review_template">\r\n  ';
 _.each( items, function( item ){ ;
__p += '\r\n    <div class=\'col-md-6 name-rev\'>\r\n      <p class="text"><strong>' +
__e( item.clientName ) +
'</strong></p>\r\n    </div>\r\n    <div class=\'col-xs-12 wrap\' style=\'margin-bottom: 15px; padding: 10px 10px 5px 10px;\'>\r\n      <div class=\'col-md-6 time-rev\'>\r\n        <p class="text"><strong>' +
__e( item.id ) +
'</strong></p>\r\n      </div>\r\n      <br>\r\n      <hr style=\'margin-top: 5px; margin-bottom: 5px;\'>\r\n      <div class=\'col-md-12\'>\r\n        <p class="text"></p>\r\n      </div>\r\n    </div>\r\n  ';
 }); ;
__p += '\r\n</div>\r\n';

}
return __p
}})();

Next I create a View and render...
var ReviewsView = Marionette.View.extend({
  initialize: function () {
    this.collection = new app.ReviewCollection();
    this.collection.fetch();
  },
  template: JST['reviews.jst']
});

var myView = new ReviewsView();
myView.render();

The JST template expands in the document before the _.each loop, nothing else gets into the markup ...
Although the DOM is available from the template, is it possible to take the collections into a separate object and receive them as a template from a separate object, like a reference?
01/26/17:
Something like this ...
916be710f04940979d8d33762f426172.jpg

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
alexesDev, 2017-01-26
@alexesDev

How is Marionette.Renderer written? I usually recommend writing something like:

Marionette.Renderer.render = function(template, data) {
  return JST[template](data);
};

And the view itself
var ReviewsView = Marionette.View.extend({
  initialize: function () {
    this.collection = new app.ReviewCollection();
    this.collection.fetch();
  },
  template: 'reviews.jst',
});

Try to write for the view
And just call in the developer console
JST['reviews.jst']({ items: [] });

A
Alex_proger, 2017-01-27
@Alex_proger

The problem was found and it is not in the template...
The collection is empty, I rewrote it on Backbone for the time being, on the weekend they will write an application, figure it out, apparently there is some kind of jamb with events... In any case, thanks for the help.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question