创建模型可以清除屏幕

Creating a model clears the screen

本文关键字：清除 屏幕 模型 创建      更新时间：2023-09-26

这是我所做的代码，这是一个表单，需要姓名和电话号码，并有一个提交按钮和一个按钮，用于导航到名为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是正确的-将First Name和Phone Number改为First_Name"和"Phone_Number"

<<p> 普通指针/strong>

当一些JS奇怪地阻止其他看似无关的JS部分执行时，它指向解析中的错误。V8解释器(至少在webkit中)只是停止而不执行其余部分。如果你打开你的DevTools控制台应该会引导你到错误。

忠告

在这种情况下，只要记住所有JS对象都是关联数组，并且有一些规则控制数组键中的字符。请参阅有效的javascript对象属性名称-点表示法.和括号表示法[]之间存在一些差异。为了安全起见，请使用老派的规则:避免使用特殊字符，空格使用下划线。也使代码看起来更好!

相关文章：