Question

我在学校一直在学习Java，但决定尝试使用JavaScript并申请JavaScript训练营。我花了很多时间研究JavaScript来完成应用程序，但我从来没有经历过如此令人难以置信的事情，让我想要放弃程序员作为学习者感到沮丧Backbone.js的。

我已经努力了几个小时制作一个简单的程序但是现在当我填写信息并点击提交时，它会在输入信息的页面上创建el的多个副本，然后消失。我不知道为什么会发生这种情况，除了＆＃34;视图实例化＆＃34;控制台日志我放入显示然后启动程序和单击提交。相关的html：

<container class="app">
<form id="userInfo">
    <table>
        <tr><td>First name:</td> <td><input type="text" id="firstName" required></td></tr>
        <tr><td>Last name:</td>  <td><input type="text" id="lastName" ></td></tr>
        <tr><td>E-mail:</td>     <td><input type="email" id="email"></td></tr>
        <tr><td><button class="addUser" type="submit">add user</button></td></tr>
    </table>
</form>
<span class="users"></span>
</container>

模特：

var User = Backbone.Model.extend({
    defaults: function(){
        return {
            firstName: 'test',
            lastName: '',
            email: ''
        }
    }
});

观点：

var UserView = Backbone.View.extend({
 template: _.template( "<div class='item'>First name: <%= firstName %><br>Last name: <%= lastName %> <br>E-mail: <%= email %><br><button class='delete' type='submit'>delete user</button><button class='edit' type='submit'>edit</button></div>"),
    el: '.app',
    initialize: function(){
        console.log("view instantiated");
        _.bindAll(this, 'render', 'createUser');
        this.model.on('change', this.render);
    },
    events: {
        'submit form': 'createUser',
        'click .delete': 'deleteUser',
        'click .edit': 'editUser'
    },

    render: function(){
        $('.users').append(this.template(this.model.toJSON()));
        console.log("changed to " + this.template(this.model.toJSON()));
        return this;
    },

    createUser : function(){
        alert("adding user");
        this.model.set({'firstName': $("#firstName").val()});
        this.model.set({'lastName': $("#lastName").val()});
        this.model.set({'email': $("#email").val()});
        this.render();
    },

    deleteUser: function(e){
        alert('delete user');
    },
    editUser: function(e){
        alert('edit user');
    },

});

var user = new User;
var userView = new UserView({model: user});

在完成之前，我还有很多功能需要付诸实践。任何帮助将不胜感激。将这个项目描述为Sisyphian是一种保守的说法。

编辑：好的，为了澄清，我想创建一个系统，其中有人可以输入姓/名和电子邮件来创建用户，有一个信息框显示在屏幕上。到目前为止，该部分已完成，除了在您单击提交时创建了几个框，然后它们都会最小化。最终，您将能够创建多个用户并编辑或删除它们。此用户信息与任何内容无关，只是存在于浏览器中。

Answer 1

正如您所提到的那样，有两个问题让我们逐一解决它们。

第一期：在页面上输入信息的el的多个副本。

在初始化方法中，您已注册＆＃39;更改＆＃39;模型上的事件，表示模型更改的任何属性，它调用render方法。

this.model.on('change', this.render);

在渲染方法中，模板被夸大并附加到＆＃39; .users＆＃39;元件。

$('.users').append(this.template(this.model.toJSON()));

只要提交表单，就会调用createUser方法。在这种方法中，set方法被调用3次，这将触发模型的变化＆＃39;事件3次，这将导致渲染方法被调用3次。另外，显式调用render方法。因此，页面上出现了4份el。

createUser : function(){
    alert("adding user");
    this.model.set({'firstName': $("#firstName").val()});
    this.model.set({'lastName': $("#lastName").val()});
    this.model.set({'email': $("#email").val()});
    this.render();
},

要解决此问题，从初始化方法中删除更改事件注册。

第二个问题：然后消失

由于表单提交而发生这种情况。为避免这种情况，您需要在事件上调用 preventDefault方法。更新creaUser代码，如下所示：

createUser : function(event){
    event.preventDefault();
    //Rest of your code can come here
},

Answer 2

在Javascript中，你的对象构造函数是必须被调用的函数，所以当你这样做时：

var user = new User;

您实际上并未创建新用户。相反，您将构造函数的所有属性和方法复制到user，有效地为同一构造函数创建一个新符号。

因此，为了创建新用户，您必须这样做：

var user = new User();

如果您想传入一些参数，可以这样做：

var user = new User({'first name': 'Jimbo', 'last name': 'Uncleperson'});

您通常不会设置默认值并将其返回。相反，模型定义通常类似于：

var User = Backbone.Model.extend({
    defaults: {
            firstName: 'test',
            lastName: '',
            email: ''
        },
    someMethod: function () { // here we can define some other functionality
          console.log(this.firstName);
    }
});

默认值用于未提供的任何值。

之后，当您将用户对象传递给视图时，它应该可以对其进行操作：

var userView = new UserView({model: user});

在骨干中消失（或重新复制？）视图

2 个答案: