Асинхронная загрузка шаблона Backbone.Marionette

Мы используем Backbone и Backbone.Marionette для нашего проекта. В настоящее время мы храним все шаблоны для наших представлений на сервере и перезаписали вызов loadTemplate для их асинхронной загрузки.

Однако когда мы используем представление макета, поскольку шаблон для представления загружается асинхронно, кажется, что мы не можем получить немедленный доступ к областям макета. Ниже приведен пример:

var layoutView = new Layout();
var itemView = new ItemView();

App.containerRegion.show(layoutView);
layoutView.mainRegion.show(itemView); <---- This is where the issue would occur.

Если бы мы не загружали шаблон с сервера асинхронно, то все бы работало нормально. Что было бы хорошим способом реализовать это? Мы хотим хранить шаблоны на сервере, а не загружать все сразу. Мы также хотим избежать привязки к событию рендеринга представления макета во всем нашем коде.

Спасибо


backbone.js marionette jquery-templates backbone-events backbone-views
person user1691932    schedule 23.09.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно скачать плагин Marionette.Async. Он был создан, чтобы делать именно то, что вы хотите.

Но вам нужно знать, что есть последствия для производительности при захвате шаблонов с сервера, async. Задержка в сети для этого может привести к тому, что пользователи будут думать, что приложение не отвечает, если на экране нет чего-то, говорящего им, что приложение работает за кулисами (например, в виде вращающейся графики).

Было бы лучше получить как можно больше шаблонов одновременно, чтобы сократить задержку в сети и передачу. Есть сообщение в блоге, которое написал мой друг при выполнении именно этого.

person Derick Bailey    schedule 26.09.2012

arrow_upward
2
arrow_downward

Я думаю, вам нужно переопределить функцию рендеринга Marionette.ItemView, где вы сначала загружаете данные шаблона и визуализируете представление при успешной загрузке шаблона:

  render: function(){          
    if (this.beforeRender){ this.beforeRender(); }

    this.trigger("before:render", this);
    this.trigger("item:before:render", this);

    var data = this.serializeData();
    var templateSrc = this.getTemplate();

    $.ajax({
      url: 'templatesFolder/' + templateSrc,
      success: _bind(function(template){
         var html = Marionette.Renderer.render(template, data);
         this.$el.html(html);

         if (this.onRender){ this.onRender(); }
         this.trigger("render", this);
         this.trigger("item:rendered", this);
      }, this)
    })

    return this;
  },
person Andreas Köberle    schedule 23.09.2012