Блог

Я просто пытаюсь изучить 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();
    },
 

Когда я выполняю событие щелчка, оно автоматически возвращает меня на главную страницу, даже не переходя в режим отладки (я установил отладчик в value = new SubAccountModel(); , и он не прошел. Мне интересно, работает ли мой способ написания события щелчка или я что-то упускаю. Пожалуйста, у кого-нибудь есть идеи, оценили.
Спасибо.Дайте мне знать, если потребуется больше деталей.

Проблема, с которой вы сталкиваетесь, заключается в том, что нажатие на #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');
            }
        });
    }
});
 

Другое преимущество, которое вы получаете от прослушивания формы таким образом, заключается в том, что другие методы отправки формы (например, нажатие enter) также будут собраны и обработаны правильно.

В качестве примечания:

У вас не должно быть events в вашем маршрутизаторе. Вместо этого вы должны создавать представления, которые обрабатывают все взаимодействия с пользователем.

Router — Имеет дело с взаимодействием между состоянием браузера (URL) и тем, что видит пользователь (пользовательский интерфейс). Его основным направлением должно быть преобразование URL в View s на странице (пользовательский интерфейс).

View — Имеет дело с взаимодействием между пользователем и данными. Его основная задача — отображать любые данные в пользовательском интерфейсе и позволять пользователю взаимодействовать с ними. Например, отправка формы.

Model — Имеет дело с взаимодействием между браузером и сервером (AJAX-запросы). Его основной задачей должна быть обработка данных, которые сохраняются / извлекаются с сервера. View Следует использовать модели для инкапсуляции данных и отображения их в пользовательском интерфейсе.