Marionette '템플릿을 찾을 수 없습니다'- 외부 템플릿 불러 오기

저는 백본과 더불어 새로운 것입니다. Idk 왜 나는이 오류가 발생합니다. 내 구조가 올바른 것처럼 보이지만 오류가 지속됩니다.Marionette '템플릿을 찾을 수 없습니다'- 외부 템플릿 불러 오기

이 내 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는 비동기이며 백본 후 템플릿 부하가 렌더링하려고하기 때문에 문제가 생각?

출처

2014-07-01 renatorib

당신은 당신의 HTML을 업데이트하고

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

와

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

을 대체 또는 꼭두각시 뷰에 템플릿 파일을로드 할 requireJs !text 플러그인을 사용할 수 있습니다.

출처

2014-07-01 05:38:07 Evgeniy

을하지만 코드의이 부분이 '_.each (document.querySelectorAll (DO '[유형 = "텍스트/X-템플릿"]') , 함수 (엘) {...' – renatorib

문제는 앱을 초기화 한 후에 템플릿이로드된다는 것입니다.

대신

,이 시도 :

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

출처

2014-09-23 14:01:33 FREEZX

-1

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

출처

2016-11-30 13:25:02 zloctb

Marionette '템플릿을 찾을 수 없습니다'- 외부 템플릿 불러 오기

답변

관련 문제