define(function(require) {
require('css!./addBookView.css');
var template = require('text!./addBookView.mustache');
var BaseView = require('base/view');
var DropDownView = require('modules/components/dropdown/dropDownView');
var AddBookView = BaseView.extend({
events: {
'click .cancel-button': 'cancelButtonClicked',
'click .submit-button': 'submitButtonClicked'
},
initialize: function(options) {
this.genres = options.genres;
this.book = options.book;
this.genresDropDown = new DropDownView({
defaultOption: "Choose a genre"
});
},
render: function() {
this.renderTemplate(template);
this.genresDropDown.setElement(this.$(".genres-dropdown")).renderWith({
options: this.genres.toOptions()
});
return this;
},
cancelButtonClicked: function(event) {
event.preventDefault();
this.hide();
},
submitButtonClicked: function(event) {
event.preventDefault();
this.book.save({
author: this.$('.author-input').val(),
title: this.$('.title-input').val(),
genre: this.genresDropDown.selected()
});
this.hide();
this.trigger("book:added", this.book);
},
show: function() {
this.book.clear();
this.$el.removeClass('hide');
},
hide: function() {
this.$el.addClass('hide');
}
});
return AddBookView;
});
beforeEach(function() {
template = sinon.mock();
var TestView = View.extend({
template: template
});
testView = new TestView();
});
define(function (require) {
var BaseView = require('base/View');
var View = BaseView.extend({
template: require('text!./template.html'),
getTemplateData: function () {
return this._formatTemplateData(this.model.omit('movies'));
}
});
return View;
});
it('unbinds delegated events', function() {
var spy = sinon.spy();
var TestView = View.extend({
events: {
'click': spy
}
});
var testView = new TestView();
testView.destroy();
testView.$el.click();
expect(spy).not.toHaveBeenCalled();
});
define(function(require) {
var View = require('base/view');
// var UserDetailView = require('./userDetailView');
var template = require('hgn!./lights');
var LightsView = View.extend({
events: {
"click .toggle": "toggle"
},
template: template,
className: "lights",
tagName: "li",
initialize: function(options) {
this.listenTo(this.model, "change:status", this.statusChangeHandler);
},
render: function() {
this.$el.toggleClass("lightOn", this.model.get("status") === "ON");
this.renderTemplate(this.model.toJSON());
return this;
},
toggle: function() {
var status = this.model.get("status") === "ON" ? "OFF" : "ON";
this.model.save("status", status, {patch: true});
},
statusChangeHandler: function() {
var isStatusON = this.model.get("status") === "ON";
this.$el.toggleClass("lightOn", isStatusON);
}
});
return LightsView;
});
it('removes the view from the DOM', function() {
var DOM = $('<div></div>');
var TestView = View.extend({
className: 'someClass',
tagName: 'h1'
});
var testView = new TestView();
DOM.append(testView.el);
expect(DOM.html()).toEqual('<h1 class="someClass"></h1>');
testView.destroy();
expect(DOM.html()).toEqual('');
});
it('unbinds events bound on subviews', function() {
var spy = sinon.spy();
var TestView = View.extend({
initialize: function() {
this.listenTo(events, "test", spy);
}
});
var view = new View();
var testView = new TestView();
view.addSubView(testView);
view.destroy();
events.trigger("test");
expect(spy).not.toHaveBeenCalled();
});
define(function(require) {
var View = require('base/view');
var events = require('component/eventBus');
var UserDetailView = require('./userDetailView');
var userTemplate = require('hgn!./user');
var UserView = View.extend({
template: userTemplate,
initialize: function(options) {
this.user = options.user;
this.userDetailView = new UserDetailView({ user: this.user });
this.addSubView(this.userDetailView);
// write this instead (see component/eventBinder.js)
this.listenTo(this.user, 'change', this.render, this);
// or this to bind to global events
this.listenTo(events, 'global', this.render, this);
},
render: function() {
this.renderTemplate(this.user.toJSON());
this.renderUserDetail(this.$('.user-detail'));
return this;
},
renderUserDetail: function(el) {
this.userDetailView.setElement(el).render();
}
});
return UserView;
});
/**
REGISTER VIEW
*/
var View = require('base/view');
var RegisterView = View.extend({
template: 'register',
container: '.module-container',
events: {
'click #test-button': 'clickButton'
},
// bindings: {
// 'class .root-module-content': 'title'
// },
constructor: function(options) {
View.apply(this, arguments);
},
render: function() {
View.prototype.render.apply(this);
},
clickButton: function() {
console.log('click');
this.model.set('title', this.model.get('title') + 'a');
}
});
module.exports = RegisterView;
/**
LAYOUT VIEW
*/
var ListView = require('views/components/list');
var View = require('base/view');
var LayoutView = View.extend({
template: 'layout-unsigned',
container: 'body',
constructor: function(options) {
View.apply(this, arguments);
},
render: function() {
View.prototype.render.apply(this);
/*
this.subview('menu', new ListView({
template: 'tabs',
attachMethod: 'prepend',
container: this.$el,
model: this.model
}));
*/
}
});
module.exports = LayoutView;
define(function (require) {
var _ = require('underscore');
var BaseView = require('base/View');
var StatisticsView = require('./channelStatistics/Statistics');
var MoviesListView = require('./moviesList/Grid');
var channelUrlRegex = /(?:http:\/\/(?:www\.)?\/)?youtube.com\/user\/(\w+)/; // cached regexp
var View = BaseView.extend({
el: '#youtube-analyzer',
events: {
'submit form': function (e) {
e.preventDefault();
var channelUrl = this.$('input#channel-link').val();
this.loadChannel(channelUrl);
}
},
initialize: function () {
BaseView.prototype.initialize.apply(this, arguments);
this.toggleLoadingState(false);
this._initSubviews();
return this;
},
renderError: function (error) {
this.$('#channel-link-error').html(error);
return this;
},
clear: function () {
this.renderError('');
_.chain(this.subviews).pluck('$el').invoke('empty');
return this;
},
toggleLoadingState: function (state) {
function getMethod(state) {
return state ? 'show' : 'hide';
}
this.$('#loader')[getMethod(state)]();
this.$('#btn-submit')[getMethod(!state)]();
return this;
},
_initSubviews: function () {
var subviews = {};
var statistics = new StatisticsView({
model: this.model,
el: '#channel-stats'
});
subviews.statistics = statistics;
var moviesList = new MoviesListView({
collection: this.collection,
el: '#channel-movies'
});
subviews.movies = moviesList;
this.subviews = subviews;
return this;
},
loadChannel: function(channelUrl) {
var view = this;
view.clear();
if (!_.isString(channelUrl) || !channelUrlRegex.test(channelUrl)) {
view.renderError('Wrong channel url format');
return false;
}
var channelName = channelUrlRegex.exec(channelUrl)[1];
var dfd = view.model.loadChannel(channelName)
.then(function () {
return view.collection.loadPlaylist(view.model.get('moviesListId'));
})
.then(function () {
return $.when(view.model.save(), view.collection.batchSave());
});
dfd.done(function () {
_.invoke(view.subviews, 'render');
})
.fail(function (response) {
view.renderError(response.responseText);
})
.always(function () {
view.toggleLoadingState(false);
});
view.toggleLoadingState(true);
return dfd;
}
});
return View;
});