木偶“找不到模板” - 加载外部模板答案

【问题标题】：Marionette 'could not find template' - load external templates木偶“找不到模板” - 加载外部模板
【发布时间】：2014-07-01 03:49:59
【问题描述】：

我是有骨干的新手，也是木偶。我知道为什么我会收到这个错误。我的结构似乎正确，但错误仍然存在。

这是我的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>

所有 3rd 方依赖路径都是正确的。

出现的错误是这样的： Error: Could not find template: '#main-tpl'

谁能告诉我我哪里错了？谢谢。

编辑： 我认为问题是因为$.get 是异步的，并且主干尝试渲染后的模板加载，我该如何解决这个问题？

【问题讨论】：

标签： backbone.js underscore.js marionette

【解决方案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插件将模板文件加载到木偶视图中。

【讨论】：

但这部分代码是这样做的_.each(document.querySelectorAll('[type="text/x-template"]'), function (el) { ...

【解决方案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});

【讨论】：