В приложении Backbone, что такое работа модели, представлений и коллекций по соглашению - PullRequest
Новая
       22

В приложении Backbone, что такое работа модели, представлений и коллекций по соглашению

0 голосов
/ 05 октября 2011

Я сейчас занимаюсь разработкой мертвого простого приложения, используя библиотеку javascript backbonejs mvc. Просто, чтобы показать, насколько это просто здесь - 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. Служба вернет ту же строку вместе со статусом операции сохранения базы данных.

Теперь я озадачен тем, где будет обрабатываться событие щелчка (это в модели?), После чего должен вызываться метод рендеринга (это в представлениях). Ниже вы найдете скрипт, которым я управлял до сих пор

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 где-то выше контейнера? Может ли представление отображать оба вида?

Ответы [ 2 ]

5 голосов
/ 05 октября 2011

Итак, отказ от ответственности: если это все, что делает ваше приложение, то 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);
});
2 голосов
/ 05 октября 2011

я бы сделал щелчок в представлении, в котором вам понадобится 2 вида в моих глазах, 1 - это представление приложения, в котором хранится все ваше приложение, а другое - просто представление для каждой пользовательской модели, отображаемой в вашем списке.

здесь ваша пользовательская модель 

var User = Backbone.Model.extend({
  defaults: {
    id: 0,
    name: 'no-name'
  }
});

здесь ваша коллекция 

var Users = Backbone.Collection.extend({

  model: User,

  create : function(model, options) {
    var coll = this;
    options || (options = {});
    if (!(model instanceof Backbone.Model)) {
      model = new this.model(model, {collection: coll});
    } else {
      model.collection = coll;
    }
    var success = function(savedModel, resp) {
      coll.add(savedModel);
      if (options.success) options.success(nextModel, resp);

      // fire success event
      coll.trigger("savesuccess", savedModel);
    };
    var error = function(resp) {
      if(options.error) options.error(resp);

      // fire error event
      coll.trigger("saveerror");
    }
    return model.save(null, {success : success, error : error});
  }
});

, поэтому здесь возможное представление пользователя 

var UserRow = Backbone.View.extend({

  tagName: "li",

  initialize: function(){
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

  className: "user",

  render: function() {
    var user = this.model;
    $(this.el).html(user.get('name'));
    return this;
  }

});

здесь ваше приложениеView 

var AppView = Backbone.View.extend({

  el: 'body',

  events: {
    'click button#btnSubmit': 'addUser'
  },

  initialize: function(){
    this.collection = new Users();
    this.collection.bind('add', this.appendUser);
    this.collection.bind('savesuccess', this.saveSuccess);
    this.collection.bind('saveerror', this.saveError);
    this.counter = 0;
    this.render();
  },

  addUser: function(){
    this.counter++;
    var user = new User();
    user.set({
      id: user.get('id') + this.counter,
      name: $('#txtName', this.el).val()
    });
    this.collection.add(user);
  },

  appendUser: function(user){
    var userRow = new UserRow({
      model: user
    });
    $('ul#names', this.el).append(userRow.render().el);
  },

  saveSuccess: function(user){
    alert('successfully saved, you can append something to the AppView DOM to show that saving was successful ...');
  },

  saveError: function(){
    alert('failed to save, you can append something to the AppView Dom to show that saving failed, or remove the item again ...');
  }
});

здесь вы инициализируете все это 

var App = new AppView();

, как вы можете видеть, само рендеринг элементов не происходит после сохранения его в базе данных, он добавляется в коллекцию, appView связываетсяв событие add коллекции и добавляет нового пользователя в ваш список.

подключение к серверу CRUD работает автоматически благодаря использованию функции create в коллекции.

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

...