使用Backbone.js我需要使用表单标签吗?

时间:2013-07-25 18:39:31

标签: javascript forms backbone.js

我的问题是我是否需要使用表单标记?

如果我没有使用javascript,我会使用表单标签,它会提交自己。我的意思是我没有在客户端编写任何代码。像这样(w3schools.com)

<form name="input" action="html_form_action.asp" method="post">
  Username: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

使用Backbone.js我使用事件:在视图内部捕获提交按钮上的单击,然后保存模型。像这样:

events: {
"click #submit": "SaveData",
},
SaveData: function(){
  /*javascript to save model or post using ajax */
}

显然我需要第一个例子中的表单标签,但如果我使用的是ajax / javascript,我是否需要它?

谢谢,

安德鲁

3 个答案:

答案 0 :(得分:2)

  

我的问题是我是否需要使用表单标记?

不,您永远不需要使用表单标记。所有骨干通信都是通过ajax进行的。

是的,正如其他人提到的那样,可以选择构建您的表单标签,HTML,网址和服务器端代码,以便在通过常规表单提交和整页加载使用时正常工作。

我从不使用表单标签,这就是原因:

  • 我构建我的主干API URI以匹配REST约定,我的页面URI有时只与那些相关
  • 我认为立即自动保存是一种非常优越的交互模式,因此当您选中任何复选框时,我会发送一个AJAX PUT,您的更改会立即保存,无需提交按钮或整页加载。请注意,Backbone.Model的默认行为是发送整个记录,这不是我个人的偏好,但我更像是一种RPC思维与REST。
  • 我可能不希望将我的服务器编码为单页时尚和多页面方式,因为这样做比基本单页样式困难得多,除非你有情有可原的情况,否则不值得努力需要这个。
    • 单页应用程序只需要一个基本的index.html,一个专门返回JSON的REST API,以及一大堆浏览器JS
    • 如果您希望能够通过整页加载来处理部分或全部操作,那么您需要进行更多的服务器端编码才能呈现与您的主干浏览器代码完全匹配的服务器端HTML。你需要像airbnb/rendr这样的东西,轻描淡写地说是非常重要的。由于您的示例表示ASP服务器,因此可以在ASP和骨干网之间共享模板。
  • 如果您根本不包含form标签,则表示您不必测试它们。如果你包含它们,那么你暗示它们可能会起作用,然后你可能应该对它们进行测试。
  • 如果您根本不包含form标记,那么在您的服务器上担心的一组意外的HTTP请求就会少一些。你的意图更清楚。这是一个AJAX / JSON API。没关系,接受它。

总体而言“禁用javascript的用户”的事情 - 请停止这样说。任何人都可以指向一个单独的Web应用程序,它在启用JS时使用backbone.js并且可以在禁用JS的情况下运行吗?我不认为有人写过。此外,它会感觉像十年前的时间扭曲。如果您正在构建一个骨干应用程序,那么您将全身心地投入到JS中。如果您希望您的站点在没有JS的情况下工作,请不要使用骨干,请使用传统的多页Web应用程序框架。

答案 1 :(得分:1)

您不需要,但如果是 FORM ,我认为您应该

因为编写语义标记会更好。

这是一篇关于语义html的文章供您参考: https://www.adobe.com/devnet/html5/articles/semantic-markup.html

答案 2 :(得分:1)

Ps:我重新阅读了你的问题并注意到它涉及一个Backbone特定的环境。我不太了解Backbone,但以下内容应该适用。

正如生活中的大多数事情一样,答案取决于它。

考虑一种情况,如果您在焦点位于表单的任何输入时按enter键,它将自动提交表单。如果单击提交类型的按钮/输入,它将提交表单。因此,您可能只是监听表单提交事件,阻止默认操作,然后激活您的ajax查询。如果您已有表单,则可以使用http://api.jquery.com/serialize/收集ajax请求的所有表单字段。

在大多数情况下,我只是让他们在那里。阅读标记时,意图很明确。如果表单有data-ajax="true",那么我知道它已启用ajax。从表单的action属性,我知道相应的服务器URL。我不需要搜索相应的js文件以了解此表单的提交位置。