在Backbone应用程序中,按惯例,模型,视图和集合的工作是什么

Question

我现在正在使用backbonejs mvc javascript库开发一个死的简单应用程序.只是为了表明这里的简单是html

示例Html

<div class="container">
    <div>
        <label>
            Name:
            <input id="txtName" type="text" title="Type your name please" /></label>
        <button id="btnSubmit" type="button" value="Submit">
            Submit</button>
    </div>
    <div id="names">
    </div>
</div>

手术

这就是我想要的应用程序.

1. 用户键入名称(或一些字母数字字符串)并单击提交.

2. 验证后的值(他们称之为模型我认为)将被发送到宁静的服务.

3. Service将返回相同的字符串以及数据库保存操作的状态.

我现在很困惑click事件将在哪里处理(在模型中？),之后应该在何处调用render方法？(在视图中).下面你会找到我迄今为止管理的脚本

Model.js

//store a global reference to model
    window["model"] = Backbone.Model.extend({

        defaults: { name: "Type your name"
        },
        validate: function () {

        }

    });

View.js

//store a global reference to view
window["view"] = Backbone.View.extend({});

在视图中没有任何说法:(

的application.js

//when every thing is ready kick of the application
$(document).ready(function () {


    var modelInstance = new model();


});

1. 所以我将click事件添加到application.js或model.js.中的按钮,这是常规/最佳实践吗？

2. 我是否可以将从服务返回的名称集合#names和数据库插入的状态呈现div在容器上方的某个位置？视图可以渲染两个视图吗？

Answer 1

所以,这里有一个免责声明:如果这是你的应用程序正在做的全部,那么Backbone就是太多的仪式了.当应用程序变得越来越复杂,移动部件越来越多时,Backbone变得相当惊人.

话虽这么说,我已经创建了一个jsFiddle来强调你如何使用Backbone来做你想做的事:http://jsfiddle.net/BrianGenisio/CZwnk/4/

基本上,您有一个Person模型和一个People集合来保存Person模型.然后,您有三个视图:NewPersonView输入数据的表单,负责将新项目添加到People集合中.然后你有一个PeopleView负责显示People集合的视图,它将观察集合并显示任何添加内容.最后,是PersonView负责显示个人Person模型的.

当这一切结合在一起时,它看起来像这样:

HTML:

<script id="new_person_template" type="text/template">    
    <label>
        Name:
        <input id="txtName" type="text" title="Type your name please" />
    </label>
    <button id="btnSubmit" type="button" value="Submit">Submit</button>
</script>

<script id="person_template" type="text/template">    
    Hello, my name is <%= name %>
</script>

<div id="container">

</div>

JavaScript的

window.app = {};

window.app.Person = Backbone.Model.extend({
    defaults: { name: "Type your name" },
    validate: function () { }
});

window.app.People = Backbone.Collection.extend({
    model: window.app.Person
});

window.app.NewPersonView = Backbone.View.extend({
    template: _.template($("#new_person_template").html()),
    initialize: function () {
        _.bindAll(this, 'submit');
    },
    events:
    {
        "click #btnSubmit": "submit"
    },
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
    submit: function (x, y, z) {
        // If you want this to go up to the server and sync, do this instead:
        // this.model.create({name: $("#txtName").val()});
        // but since we don't really have a server right now, we'll just create and add
        var person = new window.app.Person({name: $("#txtName").val()});
        this.model.add(person);
    }
});

window.app.PersonView = Backbone.View.extend({
    tagname: "li",
    template: _.template($("#person_template").html()),
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

window.app.PeopleView = Backbone.View.extend({
    tagName: "ul",

    initialize: function() {
        _.bindAll(this, "render", "renderPerson");
        this.model.bind("add", this.renderPerson);
    },

    render: function() {
       console.log("rendering");
       this.model.each(this.renderPerson);
       return this;
    },

    renderPerson: function(person) {
        var personView = new window.app.PersonView({model: person});
        $(this.el).append(personView.render().el);
    }
});


$(document).ready(function () {

    var people = new window.app.People();
    var newPersonView = new window.app.NewPersonView({model: people});
    var peopleView = new window.app.PeopleView({model: people});

    $("#container").html(newPersonView.render().el);
    $("#container").append(peopleView.render().el);
});