Typeerror: n is undefined in underscore.min.js
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 function like in my example, because second parameter in _.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 class 并且没问题。我正在关注您的代码，接下来您要做的是使用 new SearchView 创建 class 的实例。 initalize 被调用。 render 被调用。
现在让我们看看 render 中发生了什么。有一个模板调用，它通过查找带有 $("#search_template").html() 的元素来接受实际的 html。这就是问题所在。浏览器正在从上到下阅读此 html 和 javascript。它不只是读取所有 html 然后返回到 运行 脚本。当他看到这些元素时，它定义了 html 元素，然后当他偶然发现 script 标签时，它定义了 运行s javascript。问题是，如果您从 new SearchView 行一直往上看，任何地方都没有 #search_template 元素。所以你的模板是从无到有创建的。
当然 html 页面末尾有那个元素，但脚本解释器（浏览器）不关心返回并更新您的模板。
另一个问题不那么严重，它是你说 this.$el.html( template(variables) ); 的地方，在此之前的任何地方都没有定义 variables 变量。由于无论如何您在该视图中都没有任何变量，因此将其称为 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 创建实例时，模板应该已经可用。当然它仍然有效。
这里的教训是，您可以将所有 classes 放在一起，然后在最后启动应用程序。
<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.
等解释型语言中至关重要
以下代码：
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 function like in my example, because second parameter in _.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 class 并且没问题。我正在关注您的代码，接下来您要做的是使用 new SearchView 创建 class 的实例。 initalize 被调用。 render 被调用。
现在让我们看看 render 中发生了什么。有一个模板调用，它通过查找带有 $("#search_template").html() 的元素来接受实际的 html。这就是问题所在。浏览器正在从上到下阅读此 html 和 javascript。它不只是读取所有 html 然后返回到 运行 脚本。当他看到这些元素时，它定义了 html 元素，然后当他偶然发现 script 标签时，它定义了 运行s javascript。问题是，如果您从 new SearchView 行一直往上看，任何地方都没有 #search_template 元素。所以你的模板是从无到有创建的。
当然 html 页面末尾有那个元素，但脚本解释器（浏览器）不关心返回并更新您的模板。
另一个问题不那么严重，它是你说 this.$el.html( template(variables) ); 的地方，在此之前的任何地方都没有定义 variables 变量。由于无论如何您在该视图中都没有任何变量，因此将其称为 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 创建实例时，模板应该已经可用。当然它仍然有效。
这里的教训是，您可以将所有 classes 放在一起，然后在最后启动应用程序。
<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.
等解释型语言中至关重要