【发布时间】：2014-07-08 10:09:13
【问题描述】：
这是我制作的代码，这是一个包含姓名和电话号码并提交的表单 按钮和一个按钮，用于导航到名为 formentries 的页面以显示条目。我创建了一个视图并编写了一些 HTML 内容，并在输入和提交时单击了条目，一个警报框显示了输入。我需要创建一个模型、集合（以及另外 1 个视图）以在不同页面上显示所有条目。但是当我创建一个模型时
FormView = backbone.Model.extend({
defaults: {
First Name: "Unknown",
Phone Number: "Not Defined
}
});
索引页上的表单消失了。
剩下的代码是
<html>
<meta charset="utf-8">
<title>BackboneJs Tutorial</title>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-
1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-
localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
</head>
<body>
<div id="form_container">a</div>
<script type="text/template" id="form_template">
<label class="ui-hidden-accessible"><b>First Name</b></label>
<input type="text" id="input_name" placeholder="First Name"/>
<label class="ui-hidden-accessible"><b>Phone Number</b></label>
<input type = "text" id="input_phonenumber" placeholder="Phone Number" />
<input type="button" id="search_button" value="Search" />
<a href="#/formentries" class="ui-btn ui-corner-all ">Form Entries</a>
</script>
<script type="text/javascript">
FormView = Backbone.View.extend({
initialize: function(){
this.render();
alert("DOM Ready.!!");
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#form_template").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
},
events: {
"click input[type=button]": "doAction"
},
doAction: function( event ){
// Button clicked, you can access the element that was clicked with
event.currentTarget
alert( "Form Inputs are " + $("#input_name").val() +" and " +
$("#input_phonenumber").val() );
}
});
var form_view = new FormView({ el: $("#form_container") });
</script>
</body>
</html>
【问题讨论】：
-
请查看默认对象字面量中的字段名称：“First Name”不是有效的变量名称。
标签： javascript html backbone.js