Skip to content

Commit

Permalink
fix empty list item
Browse files Browse the repository at this point in the history
  • Loading branch information
Artem Poletsky committed Apr 22, 2014
1 parent 4561bc6 commit 237a4f7
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 102 deletions.
15 changes: 11 additions & 4 deletions demo/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
"use strict";


var FilmModel=Backbone.Epoxy.Model.extend({
defaults: {
title:""
}
});

App.addScene({
name: 'videos',
isDefault: true,
Expand All @@ -10,8 +16,10 @@
'click .video-item': 'onItemClick'
},

init: function () {
this.collection = new Backbone.Collection(App.videos);
initialize: function () {
this.collection = new Backbone.Collection(App.videos,{
model: FilmModel
});
},
// handler for click event
onItemClick: function (e) {
Expand Down Expand Up @@ -85,7 +93,7 @@
App.setScenesContainer('.scenes-wrapper');
App.setHeader('.menu-items', '.menu-item');

new (Backbone.Epoxy.View.extend({
new (Backbone.View.extend({
events: {
'nav_key:blue': 'toggleView',
'nav_key:stop': function () {
Expand All @@ -100,7 +108,6 @@
SB.exit();
}
},
autoParseBinds: true,
el: 'body',
shortcuts: {
$wrap: '.wrap'
Expand Down
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
<script type="text/javascript" src="smartbox/demo/asset/lodash.compat.min.js"></script>
<script type="text/javascript" src="smartbox/demo/asset/json2.js"></script>
<script type="text/javascript" src="lib/backbone-min.js"></script>
<script type="text/javascript" src="lib/backbone.epoxy.min.js"></script>
<script type="text/javascript" src="lib/backbone.epoxy.js"></script>
<script type="text/javascript" src="smartbox/dist/smartbox.js"></script>
<script type="text/javascript" src="src/js/tabs.js"></script>
<script type="text/javascript" src="src/js/scenes.js"></script>
<script type="text/javascript" src="src/js/legend.bind.js"></script>
<!--script type="text/javascript" src="src/js/carousel.bind.js"></script-->
<script type="text/javascript" src="src/js/carousel.bind.js"></script>

<script type="text/javascript" src="smartbox/demo/demoApp/videos.js"></script>
<script type="text/javascript" src="demo/code.js"></script>
Expand All @@ -46,11 +46,11 @@

<div class="scenes-wrapper" data-bind="legend:'blue:Show/hide menu'" >
<div class="scene scene_video js-scene-video nav-item"
data-bind="legend:'enter: Play video'"
data-bixnd="carouselList: {
size: 10
data-bind="legend:'enter: Play video', carouselList: {
size: 10,
collection: $collection
}">
<div class="video-item" data-bidnd="html: title"></div>
<div class="video-item" data-bind="html: title"></div>
</div>
<div class="scene scene_input js-scene-input" data-bind="legend: 'enter:Show keyboard, number: Num input'" >
<div class="input-example">
Expand Down
205 changes: 114 additions & 91 deletions src/js/carousel.bind.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
(function () {
"use strict";


"use strict";
/*globals $, Observable, Collection, Computed, ViewModel*/
var BindsScrollCarousel = ViewModel.extend({
var BindsScrollCarousel = Backbone.Epoxy.View.extend({
events: {
'nav_key:enter': 'onEnter'
},
Expand All @@ -14,6 +13,8 @@
mouseenter: function (e) {
this.index($(e.currentTarget).index());
},


itemSelector: '.sr-item',
/**
* Зацикливание
Expand Down Expand Up @@ -147,107 +148,116 @@
this.slice.reset(this.collection.models.slice(page, page + this.visibleLength));
this.page(page);
},
initialize: function () {
initialize: function (options) {
var self = this,
_index = Observable(0),
$cur = $();


if (this.options.size) {
this.visibleLength = this.options.size;
this.itemView = Backbone.Epoxy.View.extend({
el: options.template
});


if (options.size) {
this.visibleLength = options.size;
}

_.extend(this.events, this.options.direction == 'vertical' ? {
_.extend(this.events, options.direction == 'vertical' ? {
'nav_key:up': 'onPrev',
'nav_key:down': 'onNext'
} : {
'nav_key:left': 'onPrev',
'nav_key:right': 'onNext'
});

this.events['mouseenter .' + this.options.className] = 'mouseenter'
this.events['mouseenter .' + options.className] = 'mouseenter'

this.delegateEvents();

this.$container = this.containerSelector ? this.$(this.containerSelector) : this.$el;
this.length = Observable(this.collection.length);
this.slice = Collection.create({
model: this.collection.model
}, this.collection.models.slice(0, this.visibleLength));

this.collection.on({

this._collection = options.collection;
this.collection = new Backbone.Collection(this.collection.models.slice(0, this.visibleLength), {
model: options.collection
});


this._collection.on({
add: function () {
this.length(this.collection.length);
//this.length(this.collection.length);
},
cut: function () {
this.length(this.collection.length);
//this.length(this.collection.length);
},
reset: function () {
this.length(this.collection.length);
this.slice.reset(this.collection.models.slice(0, this.visibleLength));
//this.length(this.collection.length);
this.collection.reset(this._collection.models.slice(0, this.visibleLength));
this.page(0);
this.index(0);
this.index.fire();
}
}, this);


this.index = Computed({
get: function () {
return _index();
},
set: function (val) {

if (val < 0) {
val = 0;
}
if (val >= self.visibleLength) {
val = self.visibleLength - 1;
}
if (val >= self.slice.length) {
val = self.slice.length - 1;
}

_index(val);
}
});

this.index.subscribe(function (val) {
$cur.removeClass('cur');
$cur = self.$container.children().eq(val).addClass('cur');
});

this.page = Observable(0);
if (!this.disableVoiceRefresh) {
this.page.subscribe(function () {
$$voice.refresh();
});
}
this.maxPage = Computed(function () {
var val = self.length() - self.visibleLength;
return val < 0 ? 0 : val;
});

this.canScrollForw = Computed(function () {
if (self.navLoop && self.length() > 1) {
return true;
}
return self.page() < self.maxPage();
});
this.canScrollBack = Computed(function () {
if (self.navLoop && self.length() > 1) {
return true;
}
return self.page() > 0;
});

this.current = Computed(function () {
return self.collection.at(self.page() + self.index());
});

if (this.enableScrollBar) {
this.bindScrollBar();
}
/*
this.index = Computed({
get: function () {
return _index();
},
set: function (val) {
if (val < 0) {
val = 0;
}
if (val >= self.visibleLength) {
val = self.visibleLength - 1;
}
if (val >= self.slice.length) {
val = self.slice.length - 1;
}
_index(val);
}
});
this.index.subscribe(function (val) {
$cur.removeClass('cur');
$cur = self.$container.children().eq(val).addClass('cur');
});
this.page = Observable(0);
if (!this.disableVoiceRefresh) {
this.page.subscribe(function () {
$$voice.refresh();
});
}
this.maxPage = Computed(function () {
var val = self.length() - self.visibleLength;
return val < 0 ? 0 : val;
});
this.canScrollForw = Computed(function () {
if (self.navLoop && self.length() > 1) {
return true;
}
return self.page() < self.maxPage();
});
this.canScrollBack = Computed(function () {
if (self.navLoop && self.length() > 1) {
return true;
}
return self.page() > 0;
});
this.current = Computed(function () {
return self.collection.at(self.page() + self.index());
});
if (this.enableScrollBar) {
this.bindScrollBar();
}*/
},
bindScrollBar: function () {
var self = this;
Expand Down Expand Up @@ -287,6 +297,9 @@

this.index(this.slice.indexOf(model));
this.index.fire();
},
bindings: {
':el': 'collection:$collection'
}
});

Expand All @@ -295,28 +308,38 @@
var views = {};


ViewModel.binds.carouselList = function ($el, value, context, addArgs) {
var options = this.parseOptionsObject(value);
var size = options.size;
var direction = options.direction || 'vertical';
Backbone.Epoxy.binding.addHandler('carouselList', {
init: function ($el, value, bindings, context) {

var collection = context[options.collection || 'collection'];
$el.attr('data-bind', '');
var options = value;
var size = options.size;
var direction = options.direction || 'vertical';

var view = new BindsScrollCarousel({
el: $el,
size: size,
direction: direction,
className: options.className || $el.children()[0].className,
collection: collection
});
var className = options.className || $el.children()[0].className;

if ($el[0].id) {
views[$el[0].id] = view;
}

ViewModel.binds.eachModel.call(ViewModel, $el, 'slice' + (options.template ? ', ' + options.template : ''), view, addArgs);
var template = $el.html();

$el.find('[data-bind]').attr('data-bind', 'html: ""');
$el.empty();

var view = new BindsScrollCarousel({
el: $el,
size: size,
direction: direction,
className: className,
collection: bindings.$collection(),
template: template
});

};
if ($el[0].id) {
views[$el[0].id] = view;
}
//ViewModel.binds.eachModel.call(ViewModel, $el, 'slice' + (options.template ? ', ' + options.template : ''), view, addArgs);

}
});


}());
Expand Down
2 changes: 1 addition & 1 deletion src/js/scenes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ window.App = new (TabsHead.extend({

var self = this;

Backbone.Epoxy.View.prototype.constructor.apply(self, arguments)
Backbone.View.prototype.constructor.apply(self, arguments)
//ViewModel.prototype._constructor.apply();


Expand Down

0 comments on commit 237a4f7

Please sign in to comment.