Question

我是骨干的新手，也是木偶。 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是异步的，骨干后的模板加载尝试渲染，我该如何解决？

Answer 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插件将模板文件加载到木偶视图中。

Answer 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();
        }
      }
    });
  });
});

Answer 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});

木偶＆＃39;找不到模板＆＃39; - 加载外部模板

3 个答案: