Question

我只是盯着学习backboneJs，我在这里遇到了一个问题。我正在尝试将记录发布到列表，其中我无法在发布记录的按钮上执行点击事件。以下是我正在使用的视图：

BackboneView：

var NewSubAccount = Backbone.View.extend({
        initialize: function(){

        },
        el: '#sub-account-list'
        events:{
            'click #save' : 'saveList'
        },

        render: function(id){   

            debugger;
            value = new SubAccountModel();
            var template = $("#sub-account-list").html(_.template(createtmpl, {data:value.attributes}));



        },
        saveList: function(){
            debugger;

            value = new SubAccountModel();
            var values = $('form#create-sub-account').serializeArray();

            value.save(values, {
                success: function(value){

                    alert('hello');

                }
            });
        }




    });

HTML：

<form id="create-sub-account" role="form">

  <legend>Sub Account Creation</legend>


    <label><em>Account Name</em></label>
     <input type = "text" name ="name" value=""></input><br/>

     <label><em>Description</em></label>
     <input type = "text" name ="desc" value = ""></input><br/>

     <button type="submit" id="save">Save</button>
     <button id="cancel">Cancel</button>

 </form>

编辑：

这是我用来渲染'newSubAccount'的路由器：

routes: {    
      'new': 'newSubAccount', 
       },
events:{
      'click .create-sub-account' : 'savesubAccount'
  },
newSubAccount: function(){

        var newsubaccount = new NewSubAccount(); 
        newsubaccount.render();
    },

当我执行click事件时，它会让我回到主页面，甚至没有进入调试模式（我在value = new SubAccountModel();设置了一个调试器，它没有通过。我想知道如果我写点击事件的方式是假的或我错过了什么。请任何人任何想法，赞赏。谢谢。让我知道它是否需要更多细节。

Answer 1

您遇到的问题是点击#save按钮正在提交表单，这就是重新加载页面的内容。您可以选择几种方法：

1）将保存按钮设为普通按钮而不是提交按钮，这样它就不会尝试提交表单：

 <button type="submit" id="save" type="button">Save</button>

2）如果您的意图是使用保存提交表格，那么您应该捕获表单的提交而不是点击按钮并阻止表单提交到服务器，请考虑以下事项：

var NewSubAccount = Backbone.View.extend({
    el: '#sub-account-list'
    events:{
        'submit form#create-sub-account' : 'saveList' //Listen for the submit event on the form.
    },
    render: function(id){
        value = new SubAccountModel();
        var template = $("#sub-account-list").html(_.template(createtmpl, {data:value.attributes}));
    },
    saveList: function(event){
        event.preventDefault(); // Prevent the form from submitting, as you are handling it manually

        value = new SubAccountModel();
        var values = $('form#create-sub-account').serializeArray();

        value.save(values, {
            success: function(value){
                alert('hello');
            }
        });
    }
});

通过这种方式收听表单所获得的另一个好处是，其他提交表单的方法（例如按回车键）也将被正确收集和处理。

作为旁注：

您的路由器中不应该有events。相反，您应该创建处理所有用户交互的视图。

Router - 处理浏览器状态（URL）与用户看到的内容（UI）之间的交互。它的主要焦点应该是将URL转换为页面上的View（UI）。

View - 处理用户与数据之间的互动。其主要重点是在UI中显示任何数据，并允许用户与其进行交互。例如，提交表单。

Model - 处理浏览器和服务器之间的交互（AJAX请求）。它的主要重点应该是处理从服务器保存/获取的数据。 View应该使用模型来封装数据并将其显示在UI中。

如何在BackboneJs中发生单击事件

1 个答案: