Question

这是我所制作的代码，这是一个采用姓名和电话号码并提交的表单按钮和一个按钮，用于导航到命名为formentries的页面以显示条目。我创建了一个视图并编写了一些HTML内容，输入和提交时的条目被点击一个警告框显示输入。我需要创建一个模型，集合（以及另外一个视图）来显示不同页面上的所有条目。但是当我创建一个模型时

   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>

Answer 1

@mrak是对的 - 将First Name和Phone Number更改为First_Name"和"Phone_Number"

一般指针

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

提供建议

在这种情况下，只需记住所有JS对象都是关联数组，并且有一些规则控制数组键中的字符。请参阅Valid javascript object property names - 点符号.和括号符号[]之间存在一些差异。为了安全起见，请使用旧学校规则：避免使用特殊字符并使用下划线表示空格。使代码更好看！

创建模型会清除屏幕

1 个答案: