[英]Typeerror: n is undefined in underscore.min.js
以下代碼：
var template = _.template( $("#search_template").html() );
當我嘗試運行它時，在編譯器中拋出此錯誤：
Typeerror: n is undefined in underscore.min.js 5:14721
有誰知道可能會出什么問題？ 理論上它應該是有效的代碼。 我也嘗試過使用以下代碼：
var template = _.template( $("#search_template").html(), variables );
這會導致完全相同的錯誤。 當我嘗試使用 underscore.js 運行時，出現以下錯誤：
TypeError: text is undefined in underscore.js 1429:5
當前 .HTML 頁面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective RPG; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./vendor/jquery-1.11.3.min.js"></script>
<script src="./vendor/bootstrap.min.js"></script>
<script src="./vendor/underscore.js"></script>
<script src="./vendor/backbone.min.js"></script>
<script src="./vendor/backbone.marionette.min.js"></script>
<script src="./react/build/react.min.js"></script>
<script src="./react/build/react-dom.min.js"></script>
</head>
<body>
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">The Order of the Mouse</span></h1>
<img id="order-ico" height="64" width="64" src="./ico/skullnoborder.png" alt="skull logo">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
<!-- Game menu starts here -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MENU</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Main Screen<span class="sr-only">(current)</span></a></li>
<li><a href="#">Help</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Party<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="Dragon-Bear"><a href="#">Dragon-Bear</a></li>
<li id="Deer-Wolf"><a href="#">Deer-Wolf</a></li>
<li id="Clown-Fox"><a href="#">Clown-Fox</a></li>
<li id="Rabbit-Cat"><a href="#">Rabbit-Cat</a></li>
<li role="separator" class="divider"></li>
<li id="ChangeFormation"><a href="#">Change Formation</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Skills<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="BattleSkills"><a href="#">Battle Skills</a></li>
<li id="AdentureSkills"><a href="#">Adventure Skills</a></li>
<li id="MiscSkills"><a href="#">Misc Skills</a></li>
<li role="separator" class="divider"></li>
<li id="Learn"><a href="#">Learn</a></li>
<li id="Combine"><a href="#">Combine</a></li>
<li id="Aquire"><a href="#">Aquire</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Inventory<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="EquipCharacters"><a href="#">Equip Characters</a></li>
<li id="ManageQuickslots"><a href="#">Manage Quickslots</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Relationships<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="Friendships"><a href="#">Friendships</a></li>
<li id="Romances"><a href="#">Romances</a></li>
<li id="Enemies"><a href="#">Enemies</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Magic<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="Memes"><a href="#">Memes</a></li>
<li id="Resonances"><a href="#">Resonances</a></li>
<li id="Auras"><a href="#">Auras</a></li>
<li id="Mantra"><a href="#">Mantra</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="Profile"><a href="#">Profile</a></li>
<li role="separator" class="divider"></li>
<li id="Logout"><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Game menu ends here -->
<!-- MVC starts here-->
<div id="app-container">
<div id="main-region" class="container">
</div>
</div>
<div id="search_container"></div>
<script type="text/template" id="no-template">
<p>You try to fall asleep in your bed but you cannot. Your heart is beating so fast you feel like it will fail. All night you are plagued by images of your still conscious body being cut open at autopsy. You wake up often. During the days you are afraid to be left alone. The only solace you have is a lady
who calls herself Deer-Wolf, who texts you often and calls you on occasion. You find her voice comforting but you are still afraid, and feel that you will never be fully safe until you solve the case. You ask your friends for help, even offer to pay them to investigate but they etiher ignore you, decline, or tell you to go away. You are not sure if they believe you and are too scared, or if they think you are crazy. Either way, they won't help.</p>
</script>
<script type="text/template" id="static-template">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p><p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</script>
<script type="text/template" id="yes-template">
<p>When you arrive at the Plymouth station a woman named Deer-Wolf is there to meet you. Initially she fails to notice you
and looks into the distance with a kind of dazed confusion that seems to suggest she has considered the exact point at
which the universe might have ended, present within a kind of altered dimensionality that placed her materially at a similar point
of existence to you, while leaving her utterly absent from it in some other, more absolute sense. Two nuns scurry past
her, heading towards a small, fluffy dog, who they pet while making cooing sounds, as a stern man in an ill-fitting police officer's
uniform eyes them suspiciously. This specticle seems to rouse her from her trance, and she looks quizzically at them, tilting her
head to one side, before spotting you out of the corner her eye and waving you over.</p>
<p>When you arrive at the hotel it is empty but for two bleary eyed reception staff who stare as you walk past.
Deer-Wolf tells you this is the place where the murderer lives. He rents a different room each week, always under different
assumed names. He tells people this is because he is married, and likes to take women back un-noticed. The staff have never seen one leave,
but the room is always impecably kept, so the uneasy feeling the hotel staff have about him has never yet been officially corroborated. </p>
</script>
<script type="text/javascript">
var TheOrder = new Marionette.Application();
TheOrder.StaticView = Marionette.ItemView.extend({
el: "#main-region",
template: "#static-template",
events : {
"click input[type=button]" : "yesPage"
},
yesPage: function(event){
// Button clicked
alert("test");
},
});
TheOrder.on("start", function(){
var staticView = new TheOrder.StaticView();
console.log("Order of the Mouse has started!");
staticView.render();
});
TheOrder.start();
</script>
<script type="text/javascript">
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
alert("starting to understand marionette");
var template = _.template( $("#search_template").html() );
this.$el.html( template(variables) );
}
});
var search_view = new SearchView({ el: $("#search_container") });
</script>
<script type="text/javascript">
var character = Backbone.Model.extend({
initialize: function(){
this.on("change:name", function(model){
var name = model.get("name");
var nickname = model.get("nickname");
var age = model.get("age");
var funny = model.get("funny");
var kind = model.get("kind");
var credible = model.get("credible");
var strong = model.get("strong");
var quick = model.get("quick");
var intellegent = model.get("intellegent");
alert("Created " + name + " Changed Nickname to " + nickname + " Changed Age to " + age + " Changed Funny attribute to " + funny + " Changed Kind attribute to " + kind + " Changed Credible attribute to " + credible + " Changed Strong attribute to " + strong + " Changed Quick attribute to " + quick + " Changed Intellegent attribute to " + intellegent + ".");
});
}
});
var DragonBear = new character;
DragonBear.set({ name: "Dragon-Bear", nickname: "Drogon Barre", age: 33, funny: 138, kind: 145, credible: 378, cool: 167, strong: 143, quick: 176, intellegent: 176});
var DeerWolf = new character;
DeerWolf.set({ name: "Deer-Wolf", nickname: "EDI CAM", age: 22, funny: 134, kind: 156, credible: 495, strong: 83, cool: 198, quick: 123, intellegent: 114 });
var RabbitCat = new character({ name: "Rabbit-Cat", age: 25, funny: 124, kind: 43, credible: 78, strong: 34, quick: 156, intellegent: 202 });
var ClownFox = new character({ name: "Clown-Fox", age: 24, funny: 154, kind: 156, credible: 145, strong:380, quick: 166, intellegent: 475 });
var FireStoat = new character({ name: "Fire-Stoat", age: 54, funny: 87, kind: 298, credible: 134, strong: 143, quick: 176, intellegent: 198 });
</script>
<script type="text/template" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<div id="search_container"> </div>
您應該像在我的示例中一樣調用_.template函數，因為_.template第二個參數是[settings]不是帶有模板變量的對象
var variables = { variable: 100 }; var template = _.template( $("#search_template").html() ); template = template(variables); $('#content').html(template);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script> <script type="text/template" id="search_template"> <p><b><%= variable %></b></p> </script> <div id="content"></div>
你有兩個問題。
第一個很關鍵，與代碼本身無關。 假設您已經定義了一個SearchView類並且它很好。 我正在關注您的代碼，接下來您要做的是使用new SearchView創建該類的實例。 initalize被調用。 render被調用。
現在讓我們看看render發生了什么。 有一個模板調用，它通過使用$("#search_template").html()查找元素來接受實際的 html。 這就是問題所在。 瀏覽器正在從上到下讀取這個 html 和 javascript。 它不只是讀取所有 html 然后返回運行腳本。 它在他看到 html 元素時定義這些元素，然后在他偶然發現script標簽時運行 javascript。 問題是，如果您new SearchView行一直向上看，任何地方都沒有#search_template元素。 因此，您的模板是從無到有創建的。
然后當然在您的 html 頁面末尾有那個元素，但是腳本解釋器（瀏覽器）並不關心返回並更新您的模板。
另一個問題不太重要，它是你說this.$el.html( template(variables) ); 並且在此之前的任何地方都沒有定義variables變量。 由於無論如何您在該視圖中都沒有任何變量，因此將其稱為this.$el.html( template() );絕對this.$el.html( template() ); .
畢竟讓我們讓它運行。
<script src='http://code.jquery.com/jquery.js'></script> <script src='http://underscorejs.org/underscore.js'></script> <script src='http://backbonejs.org/backbone.js'></script> <script type="text/template" id="search_template"> <label>Search</label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /> </script> <div id="search_container"></div> <script type="text/javascript"> var SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ var template = _.template( $("#search_template").html() ); this.$el.html( template() ); } }); var search_view = new SearchView({ el: $("#search_container") }); </script>
這是一個轉折。 我在它需要的模板之前定義了SearchView 。 但是我確保在我使用new SearchView創建實例時，模板應該已經可用。 當然它仍然有效。
這里的教訓是，您可以將所有類放在一起，然后在最后啟動應用程序。
<script src='http://code.jquery.com/jquery.js'></script> <script src='http://underscorejs.org/underscore.js'></script> <script src='http://backbonejs.org/backbone.js'></script> <script type="text/javascript"> var SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ var template = _.template( $("#search_template").html() ); this.$el.html( template() ); } }); </script> <script type="text/template" id="search_template"> <label>Search</label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /> </script> <div id="search_container"></div> <script type="text/javascript"> var search_view = new SearchView({ el: $("#search_container") }); </script>
當您的 JavaScript 被瀏覽器讀取時，當您的 Backbone.JS 代碼中使用的模板尚未定義時，就會發生此錯誤：
Typeerror: n is undefined in underscore.min.js 5:14721
重新排序您的代碼以解決此問題。 在加載包含 Backbone.JS 定義和調用的 JavaScript 代碼之前加載所有必需的 HTML 和模板。
代碼順序在 JavaScript 等解釋型語言中至關重要。
未捕獲的語法錯誤-意外的標識符Underscore.min.js第24行
[英]Uncaught syntax error - Unexpected identifier Underscore.min.js line 24
未捕獲的TypeError：無法調用undefined underscore.js的方法'replace'
[英]Uncaught TypeError: Cannot call method 'replace' of undefined underscore.js
Underscore.js：TypeError：使用模板時rc未定義
[英]Underscore.js: TypeError: rc is undefined when using templates
未捕獲的TypeError：undefined不是加載jquery-min.js的函數
[英]Uncaught TypeError: undefined is not a function on loading jquery-min.js
d3.min.js：1未捕獲TypeError：n.getFullYear不是函數
[英]d3.min.js:1 Uncaught TypeError: n.getFullYear is not a function
TypeError：使用jquery.datatables.min.js時數據未定義
[英]TypeError: data is undefined when using jquery.datatables.min.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.