2014년 12월 11일 목요일

[backbonejs] Using jQuery efects backbone

I have a question about the using the jQuery effects in backbone. Basically what I want to achieve: I have a app when after clicking show more question button app load more tasks I want to delay this process for about one sec and add throbber to this while its loading. Second effect which I want to achieve is to add fadeIn() effect after the loading is done and the more tasks are appearing. The code:

$(function() {

var Tasks = Backbone.Model.extend();

var TasksList = Backbone.Collection.extend({

    model: Tasks,

    url: 'json/data.json',



}); 





var TasksView = Backbone.View.extend({



el: '#content',

con: 3,

events: {

    'click #load-more': 'onClickMore',

    'click .avatar': 'avatarClick',

    'click .answer > a': 'answerClick',

    'click .other-questions': 'questionsClick'

},



template: _.template($('#taskTemplate').html()),



initialize: function () {

    this.listenTo(this.collection, 'reset', this.render);

    this.listenTo(this.collection, 'add', this.render);





},

renderTask: function (task) {

    var html;



    html = this.template(task.toJSON());



    this.$el.append(html);

},





render: function () {

    var tasks = this.collection.first(this.con);



    _.each(tasks, this.renderTask, this);



    this.count = tasks.length;

},

onClickMore: function (event) {

    var tasks = this.collection.models.slice(this.count, this.count + this.con);



    event.preventDefault();



    if (tasks.length) {

        _.each(tasks, this.renderTask, this);



        this.count += tasks.length;

    } else {

        alert('Limit of tasks for you is reached');

    }

},

avatarClick: function (event) {

    alert("You clicked avatar!");

    event.preventDefault();

    event.stopPropagation();

},

answerClick: function (event) {

    alert("You clicked answer button!");

    event.preventDefault();

    event.stopPropagation();

},

questionsClick: function (event) {

    alert("You clicked whole task!");

    event.preventDefault();

}



});



var tasks = new TasksList(),   

tasksView = new TasksView({ collection: tasks });

tasks.fetch({ reset:true });



});




So, what's the problem? jQuery is fully available in backbone apps, you can find needed nodes by using this.$('.someSelector') inside your views...  



I`m learning and working on this all day long and my brain is already empty :P I really have no idea how to add for example .show('slow') effect on the onClickMore event :/ and how to enable throbber after the application lunch :(



Basically, just like in any old-school spaghetti jQuery code. Like this:
$(event.target).show('slow');
You can benefit from object-oriented nature of Backbone views and get more nice and organised code with some performance bonus, but basics still works.
I'd like to tell more, but it's night in here.


댓글 없음:

댓글 쓰기