2014-05-20 65 views
0

這是一個代碼,這是一個表格,需要名稱和電話號碼,並提交一個按鈕和一個按鈕導航到頁面命名的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> 
+0

請查看默認對象字面值中的字段名稱:「名字」不是有效的變量名稱。 – mrak

回答

0

@mrak是正確的 - 改變First NamePhone NumberFirst_Name""Phone_Number"

一般指針

當一些JS古怪停止等,看似不相關的部分你的JS從執行中,它指向解析中的錯誤。 V8解釋器(至少在webkit中)只是停下來,並沒有執行其餘的部分。如果您打開了DevTools,則控制檯應指示您出現錯誤。

字的建議

在這種情況下,只記得所有的JS對象是關聯數組,並有規管陣列的按鍵字符的一些規則。請參閱Valid javascript object property names - 點符號.和括號符號[]之間有一些差異。爲了安全起見,請使用舊學校規則:避免使用特殊字符併爲空格使用下劃線。讓更好看的代碼也是如此!

+0

在發佈問題後,我將自己的姓名改爲名字和電話號碼,感謝這裏的快速答覆。我也被困在一個讓我感到困惑的地方,我希望表單條目按鈕必須打開下一頁並顯示條目。我已經做了一個集合,另有一個視圖whoz el是0123_id_form_listing。我也做了一個路由器,其中''路線執行一個函數並拋出一個警告框,但如何導航到其他頁面,太順利因爲我使用jQuery的移動。任何教程或 – MixedVeg

+0

任何教程的幫助.. ?? @Sharadh – MixedVeg

+0

你不可能在這裏獲得如此詳細的演練。試試這個http://stackoverflow.com/questions/21597910/which-could-be-the-best-backbonejs-tutorial-for-beginners – Sharadh