Марионетка "не удалось найти шаблон" - загрузить внешние шаблоны

#backbone.js #underscore.js #marionette

#backbone.js #underscore.js #марионетка

Вопрос:

Я новичок в backbone, а также в marionette. Idk, почему я получаю эту ошибку. Моя структура кажется правильной, но ошибка сохраняется.

Это мой index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <!-- Main App -->
    <div id="main-area"></div>

    <!-- Templates -->
    <script id="main-tpl" src="templates/main.tpl" type="text/x-template"></script>

    <!-- 3rd party Dependencies -->
    <script src="vendor/jquery/dist/jquery.js"></script>
    <script src="vendor/underscore/underscore.js"></script>
    <script src="vendor/backbone/backbone.js"></script>
    <script src="vendor/backbone.wreqr/lib/backbone.wreqr.js"></script>
    <script src="vendor/backbone.babysitter/lib/backbone.babysitter.js"></script>
    <script src="vendor/marionette/lib/backbone.marionette.js"></script>

    <script type="text/javascript">
    // External templates load
    _.each(document.querySelectorAll('[type="text/x-template"]'), function (el) {
        $.get(el.src, function (res) {
            el.innerHTML = res;
        });
    });

    var App = new Backbone.Marionette.Application();
    _.extend(App, {
        Controller: {},
        View: {},
        Model: {},
        Page: {},
        Scrapers: {},
        Providers: {},
        Localization: {}
    });
    App.addRegions({
        Main: '#main-area'
    });
    App.addInitializer(function (options) {
        var mainView = new App.View.Main();
        try {
            App.Main.show(mainView);
        } catch(e) {
            console.error('Error on Show Main: ', e, e.stack);
        }
    });

    App.View.Main = Backbone.Marionette.Layout.extend({
        template: '#main-tpl'
    });

    (function(App) {
        'use strict';
        App.start();
    })(window.App);

    </script>
</body>

и мой template/main.tpl — это только тестовый html.

 <div>sounds</div>

Все сторонние пути зависимостей верны.

Появляющаяся ошибка заключается в следующем: Error: Could not find template: '#main-tpl'

Может кто-нибудь сказать мне, где я не прав? Спасибо.

РЕДАКТИРОВАТЬ: я думаю, что проблема в том, что $.get выполняется асинхронно, и шаблон загружается после того, как backbone попытается выполнить рендеринг, как я могу это решить?

Ответ №1:

Вы можете обновить свой HTML и заменить

 <script id="main-tpl" src="templates/main.tpl" type="text/x-template"></script>

 <script id="main-tpl" type="text/html">
   --- template code ---
</script>

Или используйте плагин RequireJS !text для загрузки файлов шаблонов в представления марионетки.

Ответ №2:

Проблема в том, что шаблон загружается после инициализации приложения.

Вместо этого попробуйте это:

 $(function () {
  var tplList = document.querySelectorAll('[type="text/x-template"]');
  var tplCounter = 0;
  _.each(tplList, function (el) {
    $.ajax({
      'url': el.src,
      success: function (res) {
        el.innerHTML = res;
          tplCounter;
        if(tplCounter == tplList.length){
          App.start();
        }
      }
    });
  });
});

Ответ №3:

 define(['marionette','tpl!cell.tpl'],function(tpl){

    var Mn = Backbone.Marionette; 

    var MyView = Mn.View.extend({

        className: 'bg-success',
        template: tpl,
        regions: {
            myRegion: '.my-region'
        }

    });

})

var model = new Backbone.Model({});

var myView = new MyView({model:model});