這是一個代碼,這是一個表格,需要名稱和電話號碼,並提交一個按鈕和一個按鈕導航到頁面命名的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>
請查看默認對象字面值中的字段名稱:「名字」不是有效的變量名稱。 – mrak