Бастапқы деректерді Backbone.js ішіне жүктеу

Мен backbone.js және MVC үшін жаңашыл боламын, егер бұл ақылсыз сұрақ болса ...

Мен мұнда кейбір backbone.js оқулықтарымен тәжірибе жасап жатырмын және бастапқы деректер жиынтығын бетке қалай жүктеуді ойластырып жатырмын.

Егер кез-келген адам мені дұрыс бағытта көрсетсе немесе неге төмендестіргенімді көрсететін болса, онда бұл өте риза еді!

Рахмет!

The code is below or at: http://jsfiddle.net/kiwi/kgVgY/1/

HTML:

Add list item

JS:

 (function($) {
   Backbone.sync = function(method, model, success, error) {
     success();
 }

var Item = Backbone.Model.extend({
    defaults: {
        createdOn: 'Date',
        createdBy: 'Name'
    }
});


var List = Backbone.Collection.extend({
    model: Item
});


//    ------------
//    ItemView
//    ------------
var ItemView = Backbone.View.extend({
    tagName: 'li',
   //name of tag to be created        
    events: {
        'click span.delete': 'remove'
    },

   //`initialize()` now binds model change/removal to the corresponding handlers below.
    initialize: function() {
        _.bindAll(this, 'render', 'unrender', 'remove');//every function that uses 'this' as the current object should be in here
        this.model.bind('change', this.render);
        this.model.bind('remove', this.unrender);
    },

   //`render()` now includes two extra `span`s corresponding to the actions swap and delete.
    render: function() {

        $(this.el).html('' + this.model.get('planStartDate') + ' ' + this.model.get('planActivity') + '     [delete]');
        return this;//for chainable calls, like .render().el
    },

   //`unrender()`: Makes Model remove itself from the DOM.
    unrender: function() {
        $(this.el).remove();
    },

   //`remove()`: We use the method `destroy()` to remove a model from its collection.
    remove: function() {
        this.model.destroy();
    }
});


//    ------------
//    ListView
//    ------------
var ListView = Backbone.View.extend({
    el: $('body'),
   //el attaches to existing element
    events: {
        'click button#add': 'addItem'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'addItem', 'appendItem');//every function that uses 'this' as the current object should be in here
        this.collection = new List();
        this.collection.bind('add', this.appendItem);//collection event binder
        this.render();
    },

    render: function() {
        _(this.collection.models).each(function(item) {//in case collection is not empty
            appendItem(item);
        }, this);
    },

    addItem: function() {
        var item = new Item();

        var planStartDate = $('#planStartDate').val();
        var planActivity = $('#planActivity').val();

        item.set({
            planStartDate: planStartDate,
            planActivity: planActivity
        });

        this.collection.add(item);
    },

    appendItem: function(item) {
        var itemView = new ItemView({
            model: item
        });
        $('ul', this.el).append(itemView.render().el);
    }
});

var listView = new ListView();
 })(jQuery);

Рахмет.

3

1 жауаптар

Here's the modified example: http://jsfiddle.net/kgVgY/2/

Сіз алдымен коллекцияны сіз қалаған деректермен жасайсыз

 var list = new List([{
        createdOn: 'Jan',
        createdBy: 'John',
    planStartDate: "dfd",
    planActivity: "dfdfd"
    }]);

содан кейін коллекцияны өзіңіз қалаған көріністе өткізіңіз

var listView = new ListView({collection: list});

Бұл кодексте қателескен барлық нәрсе туралы. Кішкентай байланысты емес ескертулер:

2
қосылды
Сіздің жылдам жауапыңыз және осы туралы қосымша ақпарат үшін рахмет.collection.each. Тағы да рахмет!
қосылды автор Matt, көзі
Backbone.collection.reset әдісін де тексеруге тұрарлық - бұл жақсы нәрсе және кейде қажет болса, add немесе remove events - жай ғана reset
қосылды автор Tom Tu, көзі