$
(
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
(
t
his .
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.
$(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.
댓글 없음:
댓글 쓰기