I'm building a quiz generator as my first Ember project, but I'm struggling. I've been able to create, edit and delete quizzes and save them to localstorage, but I'm having trouble saving/deleting quiz questions for each quiz.
I'm building it in Yeoman-Ember. I tried to add a demo to JSBin but it didn't work, so I've got a demo build here:
http://test.richardwestenra.com/embertest/
and here's a zip containing the current state of the build: http://test.richardwestenra.com/embertest/dev.zip
Here's my combined-scripts.js file:
(function() {
var Quizmaker = window.Quizmaker = Ember.Application.create();
/* Order and include as you please. */
})();
(function() {
/* global $ */
Quizmaker.QuizzesController = Ember.ObjectController.extend({
});
Quizmaker.NewController = Ember.ObjectController.extend({
content: {},
quiztypes: ['Multiple choice', 'List', 'Either/or'],
actions: {
save: function(){
var title = $('#title').val();
var excerpt = $('#excerpt').val();
var quiztype = $('#quiztype').val();
var fullname = $('#fullname').val();
var submittedOn = new Date();
var store = this.get('store');
if (Ember.isEmpty(title)) {
window.alert('Please enter a title');
return false;
} else if (Ember.isEmpty(quiztype)) {
window.alert('Please enter a quiz type');
return false;
}
var quiz = store.createRecord('quiz',{
quiztype : quiztype,
fullname : fullname,
title : title,
excerpt : excerpt,
submittedOn : submittedOn
});
quiz.save();
this.transitionToRoute('index');
},
cancel: function(){
this.transitionToRoute('index');
},
createQuestion: function(){
window.alert('This doesn\'t work for new questions. I don\'t know why. It works for existing questions.');
var store = this.get('store');
var question = store.createRecord('question',{
question : 'Test question ' + new Date()
});
var model = this.get('model');
var questions = this.get('questions');
questions.pushObject(question);
model.set('questions', questions);
model.save();
}
}
});
Quizmaker.QuizController = Ember.ObjectController.extend({
quiztypes: ['Multiple choice', 'Checklist', 'Boolean'],
actions: {
edit: function(){
this.transitionToRoute('quiz.edit');
this.set('isEditing', true);
},
doneEditing: function(){
var model = this.get('model');
var title = $('#title').val();
var excerpt = $('#excerpt').val();
var quiztype = $('#quiztype').val();
var fullname = $('#fullname').val();
var questions = this.get('questions');
if (Ember.isEmpty(title)) {
window.alert('Please enter a title');
return false;
} else if (Ember.isEmpty(quiztype)) {
window.alert('Please enter a quiz type');
return false;
} else {
this.set('isEditing', false);
model.set('title', title);
model.set('excerpt', excerpt);
model.set('quiztype', quiztype);
model.set('fullname', fullname);
model.set('questions', questions);
model.save();
this.transitionToRoute('quiz');
}
},
cancel: function(){
if (window.confirm('Are you sure you want to abandon your changes?')){
this.set('isEditing', false);
this.transitionToRoute('quiz');
}
},
remove: function(){
if (window.confirm('Are you sure you want to delete this quiz?')){
var quiz = this.get('model');
quiz.destroyRecord();
this.transitionToRoute('index');
}
},
createQuestion: function(){
var store = this.get('store');
var question = store.createRecord('question',{
question : 'Test question ' + new Date()
});
var model = this.get('model');
var questions = this.get('questions');
questions.pushObject(question);
model.set('questions', questions);
model.save();
}
}
});
Quizmaker.QuestionsController = Ember.ArrayController.extend({
needs: 'quiz',
quiz: Ember.computed.alias("controllers.quiz"),
actions: {
createQuestion: function(){
var store = this.get('store');
var question = store.createRecord('question',{
question : 'Test question ' + new Date()
});
var quiz = this.get('quiz');
var questions = quiz.get('questions');
questions.pushObject(question);
console.log(question);
},
removeQuestion: function(id){
var question = this.findProperty('id', id);
this.removeObject(question);
}
}
});
})();
(function() {
Quizmaker.Store = DS.Store.extend();
// Quizmaker.ApplicationAdapter = DS.FixtureAdapter;
Quizmaker.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'quizzes'
});
})();
(function() {
/* global Ember */
Quizmaker.Quiz = DS.Model.extend({
title : DS.attr('string'),
excerpt : DS.attr('string'),
fullname : DS.attr('string'),
quiztype : DS.attr('string'),
questions: DS.hasMany('question', {async: true}), // via http://stackoverflow.com/questions/22494140/in-ember-js-how-do-i-create-a-computed-property-that-references-first-item-in-pr
questionsCount: function() {
return this.get('questions.length');
}.property('questions.#each'), // via http://stackoverflow.com/questions/16463958/how-to-use-multiple-models-with-a-single-route-in-emberjs-ember-data
// firstQuestion: function() {
// return this.get('questions.firstObject');
// }.property('questions.firstObject')
submittedOn : DS.attr('date')
});
Quizmaker.Question = DS.Model.extend({
quiz: DS.belongsTo('quiz'),
question: DS.attr('string'),
answers: DS.attr('string')
});
// delete below here if you do not want fixtures
Quizmaker.Quiz.FIXTURES = [
{
id: 0,
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
excerpt: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
quiztype: 'Boolean',
fullname: 'Full Name',
submittedOn: null
}
];
Quizmaker.Question.FIXTURES = [
{
id: 0,
question: 'Test question Lorem ipsum dolor sit amet, consectetur adipiscing elit',
quiz: 0,
answers: [
{ answer: 'alpha', weight: 0 },
{ answer: 'beta', weight: 5 }
]
}
];
})();
(function() {
Quizmaker.ApplicationRoute = Ember.Route.extend({
model: function () {
return this.get('store').findAll('quiz');
}
});
Quizmaker.QuizzesRoute = Ember.Route.extend({
model: function() {
return this.get('store').find('quiz');
}
});
Quizmaker.QuizRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('quiz', params.quiz_id);
}
});
Quizmaker.QuestionsRoute = Ember.Route.extend({
controllerName: 'quiz',
model: function() {
return this.store.findAll('question');
}
});
})();
(function() {
Quizmaker.QuizView = Ember.View.extend({
keyDown: function(e) {
var esc = 27;
if(e.keyCode === esc){
this.get('controller').send('cancel');
}
}
});
// Give the text fields one way value binding so they don't automatically update
Quizmaker.TextField = Ember.TextField.extend({
valueBinding: Ember.Binding.oneWay('source')
});
Quizmaker.TextArea = Ember.TextArea.extend({
valueBinding: Ember.Binding.oneWay('source')
});
Quizmaker.Select = Ember.Select.extend({
valueBinding: Ember.Binding.oneWay('source')
});
})();
(function() {
Quizmaker.QuizzesView = Ember.View.extend({
});
})();
(function() {
Quizmaker.Router.map(function () {
// Add your routes here
this.resource('index',{path : '/'});
this.resource('new' , {path : '/quiz/new'});
this.resource('quizzes' , {path : '/quizzes'});
this.resource('questions' , {path : '/questions'});
this.resource('quiz', { path: '/quiz/:quiz_id' }, function(){
this.route('edit', { path: '/edit' });
});
});
})();
(function() {
/* global moment */
Ember.Handlebars.helper('format-date', function(date){
return moment(date).fromNow();
});
})();
This is quiz.hbs:
{{#if isEditing}}
<h1>Edit quiz</h1>
{{partial "editform"}}
{{else}}
<h1>{{title}}</h1>
<h4>A <em style="text-transform: lowercase;">{{quiztype}}</em> quiz by {{fullname}} <small class="muted">{{format-date submittedOn}}</small></h4>
<hr>
<p class="lead">{{excerpt}}</p>
<button type="submit" class="btn btn-default" {{action 'edit'}}>Edit</button>
<button class="btn btn-danger pull-right" {{action 'remove'}}>Delete Quiz</button>
{{/if}}
This is _editform.hbs:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
{{!-- {{#view Quizmaker.TextInputView}}
{{/view}} --}}
{{!-- <input type="text" class="form-control" id="title" name="title" placeholder="Title of the quiz" required> --}}
{{view Quizmaker.TextField type="text" class="form-control" id="title" name="title" sourceBinding="title" placeholder="Title of the quiz" required="required" }}
</div>
</div>
<div class="form-group">
<label for="excerpt" class="col-sm-2 control-label">Excerpt</label>
<div class="col-sm-10">
{{!-- <textarea class="form-control" id="excerpt" name="excerpt" placeholder="Short description of the quiz" required></textarea> --}}
{{view Quizmaker.TextArea class="form-control" id="excerpt" name="excerpt" sourceBinding="excerpt" placeholder="Short description of the quiz" rows="3" required="required" }}
</div>
</div>
<div class="form-group">
<label for="fullname" class="col-sm-2 control-label">Author</label>
<div class="col-sm-10">
{{!-- <input type="text" class="form-control" id="fullname" name="fullname" placeholder="Enter your Full Name like Alan Smithee" required> --}}
{{view Quizmaker.TextField type="text" class="form-control" id="fullname" name="fullname" sourceBinding="fullname" placeholder="Enter your full name, e.g. Alan Smithee" required="required" }}
</div>
</div>
<div class="form-group">
<label for="quiztype" class="col-sm-2 control-label">Quiz type</label>
<div class="col-sm-10">
{{view Quizmaker.Select id="quiztype" name="quiztype" class="form-control" viewName="select" content=quiztypes prompt="Pick a type:" sourceBinding="quiztype"}}
</div>
</div>
<div class="form-group">
<label for="quiztype" class="col-sm-2 control-label">Questions ({{questionsCount}})</label>
<div class="col-sm-10">
{{render "questions" questions}}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
{{#if isEditing}}
<button type="submit" class="btn btn-success" {{action 'doneEditing'}}>Save</button>
<button class="btn btn-warning pull-right" {{action 'cancel'}}>Cancel</button>
{{else}}
<button type="submit" class="btn btn-success" {{action 'save'}}>Save</button>
<button class="btn btn-warning pull-right" {{action 'cancel'}}>Cancel</button>
{{/if}}
</div>
</div>
</form>
And this is questions.hbs:
<p><button class="btn btn-info btn-sm" {{action 'createQuestion'}}><span class="glyphicon glyphicon-plus"></span> Add new question</button></p>
<table class="table table-striped">
{{#each model}}
<tr>
<td>{{this.question}}</td>
<td>{{this.id}}</td>
<td><button class="btn btn-danger btn-xs pull-right" {{action 'removeQuestion' id}}>Delete</button></td>
</tr>
{{/each}}
</table>
If anyone can point out ways I can improve it, I'd be very grateful. I've tried implementing every method I can find to get it to save or delete hasMany data but it always throws different errors and I'm not really sure where to proceed from here.
I'm also trying to figure out how to toggle the isEditing state depending on whether the /edit route is displayed (instead of having it activated by an action).
let's break this down into two different items, last to first.
The trick in showing the edit mode versus view mode is to take advantage of the free index route which is rendered at the root of every resource.
You can change your quiz template to be an outlet
{{outlet}}
and create a quiz/index template which originally held your quiz data. This template will only show up when you are at /quiz/123 when you navigate to /quiz/123/edit the index template will be replaced with the edit template. (You'll probably want to return the model from the resource to both routes using modelFor).
App.Router.map(function() {
this.resource('foo', {path:'/'},function(){
this.route('edit');
})
});
App.FooRoute = Em.Route.extend({
model: function() {
return [{color:'red'}, {color:'yellow'},{color: 'blue'}];
}
});
App.FooIndexRoute = Ember.Route.extend({
model: function() {
return this.modelFor('foo');
}
});
App.FooEditRoute = Ember.Route.extend({
model: function() {
return this.modelFor('foo');
}
});
http://emberjs.jsbin.com/lodeviyu/1/edit
In Ember Data if you have two record types that each have a relation to each other:
App.FooRecord = DS.Record.extend({
bars: DS.hasMany('bar')
});
App.BarRecord = DS.Record.extend({
foo: DS.belongsTo('foo')
});
Let's create and associate two records:
var foo = store.create('foo');
var bar = store.create('bar');
foo.get('bars').pushObject(bar);
bar.set('foo', foo);
Now let's save, and see what Ember Data will do:
foo.save();
// json sent
{
foo: {}
}
// responds with id 1
bar.save();
// json sent
{
bar: {
foo: 1
}
}
Ember Data chooses not to save the hasMany relationship if their is a correlated belongsTo from a different model type.
https://github.com/emberjs/data/commit/7f752ad15eb9b9454e3da3f4e0b8c487cdc70ff0#commitcomment-6078838
Related
I am having an issue where ng-model is failing to bind to scope.
This section of my web app is set up like a wizard with three steps.
I want to include validation on the first step to prevent the user from reaching the second step if certain requirements are not met. However, in order to this, I need to use ng-model to bind firstName and secondName to the scope.
Here is my code so far, I've also included a plunker here:
wizard.html
<div id="wizard-container" ng-controller="WizardCtrl as vm">
<div id="wizard-step-container">
<ul class="nav nav-pills nav-justified">
<li ng-repeat="step in vm.steps" ng-class="{'active':step.step == vm.currentStep}"><a ng-click="vm.gotoStep(step.step)" href="">{{step.step}}. {{step.name}}</a></li>
</ul>
</div>
<div id="wizard-content-container">
<div ng-include src="vm.getStepTemplate()"></div>
</div>
<div id="wizard-navigation-container">
<div class="pull-right pull-right-padding">
<span class="btn-group">
<button ng-disabled="vm.currentStep <= 1" class="btn btn-default" name="previous" type="button" ng-click="vm.gotoStep(vm.currentStep - 1)"></i>Previous</button>
<button ng-disabled="vm.currentStep >= vm.steps.length" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next</button>
</span>
<button ng-disabled="vm.currentStep != vm.steps.length" class="btn btn-success" name="next" type="button" ng-click="vm.save()">Save</button>
</div>
</div>
</div>
step1.html
<div class="row">
<h3 class="text-center">Step 1: Please enter your full name</h3>
<br/>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="First Name" ng-model="formData.firstName">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Last Name" ng-model="formData.lastName">
</div>
</div>
<br>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Please enter your full name.
</div>
wizard.js
angular.module('dingocvWebApp')
.controller('WizardCtrl', function ($scope, stub) {
// Wizard methods
var vm = this;
vm.currentStep = 1;
vm.formData = {};
vm.steps = [
{
step: 1,
name: 'Name',
template: 'views/wizard/step1.html'
},
{
step: 2,
name: 'Email',
template: 'views/wizard/step2.html'
},
{
step: 3,
name: 'Job Category',
template: 'views/wizard/step3.html'
},
];
vm.gotoStep = function(newStep) {
vm.currentStep = newStep;
console.log(vm.formData.firstName);
};
vm.getStepTemplate = function(){
for (var i = 0; i < vm.steps.length; i++) {
if (vm.currentStep === vm.steps[i].step) {
return vm.steps[i].template;
}
}
};
// Step 1
// Step 2
// Step 3
$scope.jobCategories = stub.getJobCategories();
// Yeoman defaults
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
I got it working. These were the tweaks:
script.js
I declared the formData object so that its interface is readily visible for us humans:
//Model
vm.currentStep = 1;
vm.formData = {firstName: null, lastName: null};
Each step gained a isReady() function that inspects the state of the vm object to decide if the user can interact with that step:
vm.steps = [
{
step: 1,
name: "First step",
template: "step1.html",
isReady: function() { return true; }
},
{
step: 2,
name: "Second step",
template: "step2.html",
isReady: function() { return vm.formData.firstName && vm.formData.lastName; }
},
{
step: 3,
name: "Third step",
template: "step3.html",
isReady: function() { return true; } // Didn't really care to write this one, sorry :)
},
];
Then, a vm.canGoForward() method was introduced. It checks for the readiness (and existence) of the next step in the chain:
vm.canGoForward = function() {
var res = true,
i,
nextStateIndex = vm.currentStep + 1;
if (nextStateIndex > vm.steps.length) {
return false;
}
for (i = 1; res && i <= nextStateIndex; i++) {
res = (res && vm.steps[i-1].isReady());
}
return !!res;
}
(If the above code looks a bit confusing, it might be so because of the 1-index baseness of the currentStep member; I'd prefer it to be 0-based...)
step1.html
The textboxes should indeed have the "vm." object identifier prepended to the ng-model values. This instructs the angular engine to get/set the appropriate values.
index.html
The forward button was changed so the ng-disabled directive would behave accordingly to the vm.canGoForward() function:
<button ng-disabled="!vm.canGoForward()" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next step <i class="fa fa-arrow-right"></i></button>
I have the following template
<script type="text/x-handlebars" id="friends/new">
<label>First Name</label>
{{input value=firstName}}<br />
<label>Last Name</label>
{{input value=lastName}}<br />
<label>About</label>
{{textarea value=about}}<br />
<button {{action "create"}} {{bind-attr disabled=isInvalid}}>Create</button>
</script>
I put data into all the fields and click the create button, which goes to the following controllers
App.FriendsNewRoute = Ember.Route.extend({
model: function(){
return { firstName: "", lastName: "", about: ""}
}
});
App.FriendsNewController = Ember.Controller.extend({
needs: "friends",
isInvalid: true,
validForm: function(){
if(this.get('lastName') && this.get('firstName')){
this.set("isInvalid", false);
} else {
this.set("isInvalid", true);
}
}.observes('firstName','lastName'),
actions: {
create: function(){
var newFriend = Ember.copy(this.content);
console.log(newFriend);
}
}
});
When calling this.get('lastName') ect the content that I have entered into the text boxes is correct. But when I log this.content, the value is still the initial value that I set in the FriendsNewRoute. What do I need to do so that this.content correctly update with the current data in my template?
You should change:
Ember.Controller
to
Ember.ObjectController
How to update hasMany in Ember.js using different controllers?
Hi
I have Ruby on Rails 4.0.3 app and I am using Ember.js
DEBUG: Ember : 1.6.0-beta.3 ember.js?body=1:3917
DEBUG: Ember Data : 1.0.0-beta.7+canary.f482da04 ember.js?body=1:3917
DEBUG: Handlebars : 1.3.0 ember.js?body=1:3917
DEBUG: jQuery : 1.11.0
I want to display hasMany in the same view using different controllers.
I have seen some example on StackOverflow but most (if not all) of them are for displaying records.
Ok talk is cheap, I am showing the code:
Models:
-javascripts/models/task.js
EmTasks.Task = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr("string"),
list: DS.belongsTo('list')
});
-javascripts/models/list.js
EmTasks.List = DS.Model.extend({
name: DS.attr('string'),
tasks: DS.hasMany('task')
});
Router:
-javascripts/router.js
EmTasks.Router.map(function(){
return this.route("lists", {
path: '/'
});
});
EmTasks.ListsRoute = Ember.Route.extend({
model: function() {
return this.store.find('list');
}
});
Controllers:
-javascripts/controllers/lists_controller.js
EmTasks.ListsController = Em.ArrayController.extend({
addList: function() {
this.store.createRecord('list', {
name: this.get('newListName')
}).save();
return this.set('newListName', '');
},
destroyList: function(id) {
if (confirm("Are you sure?")) {
this.get('store').find('list', id).then( function(record) {
record.destroyRecord();
});
}
},
});
-javascripts/controllers/list_controller.js
EmTasks.ListController = Em.ObjectController.extend({
actions: {
editList: function() {
this.set('isEditingList', true);
var model = this.get('model')
},
acceptChanges: function () {
this.set('isEditingList', false);
var name = this.get('model.name');
if (Ember.isEmpty(name)) {
this.send('removeList');
} else {
var list = this.get('model')
list.set('name', name);
list.save()
}
},
removeList: function () {
var list = this.get('model');
list.destroyRecord();
}
},
isEditingList: false
});
-javascripts/controllers/task_controller.js
EmTasks.TaskController = Em.ObjectController.extend({
isEditingTask: false
});
Templates:
-javascripts/templates/lists.handlebars [fragment]
{{#each itemController='list'}}
<div class='col-md-8'>
<h3>
{{#if isEditingList}}
{{edit-input class="form-control" value=name focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{else}}
<div {{action 'editList' on='doubleClick'}}>
{{name}}
</div>
{{/if}}
</h3>
</div>
<div class='col-md-4 down13p'>
<button class="btn btn-danger btn-small pull-right" {{action "destroyList" id}} type="button">
<span class="glyphicon glyphicon-ban-circle"></span>
</button>
</div>
{{#each task in this.tasks }}
<div class="col-md-10">
{{#if task.isEditingTask}}
{{edit-input class="form-control" value=task.name focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{else}}
<div {{action 'editList' on='doubleClick'}}>
{{name}}
</div>
{{/if}}
But is looks like isEditingTask property is not working...
Any idea how to fix that?
OK found a solution, just add itemController to tasks each loop
{{#each task in this.tasks itemController='task' }}
<div class="col-md-10">
{{#if task.isEditingTask}}
{{edit-input class="form-control" value=task.name focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{else}}
<div {{action 'editTask' on='doubleClick'}}>
{{name}}
</div>
{{/if}}
HTH
I'm having trouble with a backbone.js app I'm working on as a learning exercise. I set up a jsfiddle for it.
Here's the JavaScript:
var app = {};
$(document).ready(function() {
app.Contact = Backbone.Model.extend({
defaults: {
firstName: '',
lastName: '',
email: ''
},
validate: function(attrs) {
var errors = [];
if (attrs.firstName.trim() == "") {
errors.push({
'message': 'Please enter a first name.',
'field': 'firstName'
});
}
if (attrs.lastName.trim() == "") {
errors.push({
'message': 'Please enter a last name.',
'field': 'lastName'
});
}
if (attrs.email.trim() == "") {
errors.push({
'message': 'Please enter an email address.',
'field': 'email'
});
}
if (errors.length) {
return errors;
} else {
return false;
}
}
});
app.ContactList = Backbone.Collection.extend({
model: app.Contact,
localStorage: new Store('backbone-addressbook')
});
app.contactList = new app.ContactList();
app.ContactView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#contact-template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
initialize: function() {
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
var self = this;
this.model.on('invalid', function(model, errors) {
_.each(errors, function(error, i) {
console.log(self.el);
$(self.el).find('[data-field="' + error.field + '"]').parent().addClass('has-error');
$(self.el).find('[data-field="' + error.field + '"]').parent().find('.help-block').remove();
$(self.el).find('[data-field="' + error.field + '"]').parent().append('<span class="help-block">' + error.message + '</span>');
});
});
this.model.on('change', function(model, response) {
//console.log(self.el);
$(self.el).removeClass('editing');
this.render;
})
},
events: {
'dblclick label': 'edit',
'keypress .edit': 'updateOnEnter',
'click .destroy': 'destroy',
'click .save': 'close'
},
edit: function(e) {
this.$el.addClass('editing');
$(e.currentTarget).next('input').focus();
},
updateOnEnter: function(e) {
if (e.which == 13) {
this.close(e);
}
},
close: function(e) {
e.preventDefault();
var updateObject = {};
$(this.el).find('input[type="text"]').each(function() {
node = $(this);
updateObject[node.data('field')] = node.val();
});
this.model.save(updateObject, {validate: true});
},
destroy: function() {
this.model.destroy();
}
});
app.AppView = Backbone.View.extend({
el: '#newContact',
initialize: function() {
$(this).find('.has-error').removeClass('has-error');
$(this).remove('.help-block');
app.contactList.on('add', this.addOne, this);
app.contactList.fetch();
var self = this;
app.contactList.on('invalid', function(model, errors) {
_.each(errors, function(error, i) {
console.log(self.el);
$(self.el).find('[data-field="' + error.field + '"]').parent().addClass('has-error');
$(self.el).find('[data-field="' + error.field + '"]').parent().find('.help-block').remove();
$(self.el).find('[data-field="' + error.field + '"]').parent().append('<span class="help-block">' + error.message + '</span>');
});
});
},
events: {
'click .add': 'createContact'
},
createContact: function(e) {
e.preventDefault();
app.contactList.create(this.newAttributes(), {validate: true});
},
addOne: function(contact) {
var view = new app.ContactView({model: contact});
$('#contactList').append(view.render().el);
$('form input[type="text"]').val('');
$('form input[type="text"]').parent().removeClass('has-error');
$('.help-block').remove();
},
newAttributes: function() {
var updateObject = {};
$(this.el).find('input[type="text"]').each(function() {
node = $(this);
updateObject[node.data('field')] = node.val();
});
return updateObject;
},
});
app.appView = new app.AppView();
});
And here's the HTML:
<div class="container">
<section id="addressbookapp">
<header id="header">
<h1>Address Book</h1>
<div class="well">
<form id="newContact" action="#" role="form">
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input data-field="firstName" class="newFirstName form-control input-sm" type="text" />
</div>
<div class="form-group">
<label class="control-label" for="lastName">Last Name</label>
<input data-field="lastName" class="newLastName form-control input-sm" type="text" />
</div>
<div class="form-group">
<label class="control-label" for="email">Email Address</label>
<input data-field="email" class="newEmail form-control input-sm" type="text" />
</div>
<button class="add btn-xs">Add</button>
</form>
</div>
</header>
<section id="main">
<table class="table table-striped">
<caption>Double-click to edit an entry.</caption>
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody id="contactList"></tbody>
</table>
</section>
</section>
</div>
<script id="contact-template" type="text/template">
<form action="#" role="form">
<td>
<label class="control-label" for="firstName"><%- firstName %></label>
<input data-field="firstName" class="firstName input-sm edit" value="<%- firstName %>" type="text" />
</td>
<td>
<label class="control-label" for="lastName"><%- lastName %></label>
<input data-field="lastName" class="lastName input-sm edit" value="<%- lastName %>" type="text" />
</td>
<td>
<label class="control-label" for="email"><%- email %></label>
<input data-field="email" class="email input-sm edit" value="<%- email %>" type="email" />
</td>
<td>
<button class="btn-xs save">Save</button>
<button class="btn-xs destroy">Delete</button>
</td>
</form>
</script>
Specifically, when the user edits an entry in the list (by double-clicking), clears an input (a last name, for example) and then tries to save, there's (correctly) a validation error. The problem is that the form at the top (for creating a new entry) is also responding to the invalid event.
My question is not just how to keep this from happening but what would be the ideal way to organize things. This is a learning exercise for me, so I'd thankful for any tips -- anything you see that could be improved.
It's due to the way you've built the app: in both the "new" and "edit" forms, you tell the app to "display error messages if there's a validation problem in the collection". So when you try editing an existing model and there's a validation problem, the "new" form updates to display the errors.
What you need to do instead, is use a new (blank) model in the "new" form, display errors if it doesn't validate, and add it to the collection if it's valid. That way, both forms have their errors handled by different mechanisms and won't overlap.
See http://jsfiddle.net/n9yq2/3/
app.AppView = Backbone.View.extend({
el: '#newContact',
initialize: function() {
this.model = new app.Contact();
// edited for brevity
this.model.on('invalid', function(model, errors) {
_.each(errors, function(error, i) {
createContact: function(e) {
e.preventDefault();
var attrs = this.newAttributes();
if(this.model.set(attrs, {validate: true})){
app.contactList.create(attrs);
}
},
I am fairly new to BackboneJS. After writing multiple GET implementation, I am trying to implement Login screen with Backbone JS.
Folder Structure
app
-->model
-->view
-->templates
-->server
formSignIn.html
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" id="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" id="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
Backbone View
var SignInView = Backbone.View.extend({
el:$('.container'),
template:_.template('../templates/formSignIn.html'),
events: {
"click .btn":"signIn"
},
initialize: function() {
this.model.on('change', this.render, this);
},
render: function() {
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
},
signIn: function() {
this.model.signIn({
email: $('#email').val(),
password: $('#password').val()
});
}
});
var signInView = new SignInView({model: signInModel});
signInView.render();
Backbone Model
var SignInModel = Backbone.Model.extend({
url:function() {
'http://localhost:3000/singIn'
},
defaults: {
email:"",
password:""
},
parse: function(resp) {
return resp;
},
signIn: function() {
this.save();
}
});
var signInModel = new SignInModel();
Issues:
Template HTML is not rendering. When I open the page it shows ../templates/formSignIn.html. It means _template is not recognizing the html.
How is the view and model implementation? Is this the right way of doing? I am not very confident about calling the model's save().
In answer to your first question _.template(...) takes in a string. If you want the contents of ../templates/formSignIn.html you must include it in the dom or request it, for example using ajax.
If included in the dom it would look something it like this:
// Somewhere in the html...
<script type="text/html" id="form-signin-tpl">
<form class="form-signin" role="form">
...
</form>
</script>
// in your view
_.template($('#form-signin-tpl').html());
If you need to request the template during runtime you can use RequireJS which handles this nicely, or you could manually request it with jQuery, perhaps like this:
$.get( "path/to/templates/formSignIn.html", function( html ) {
var tpl = _.template(html);
});
In answer to the second question
the model's url parameter is a string, not a function.
You only need to define parse if you need to customize how the server's data is parsed.
This is probably more what you're going for:
var SignInModel = Backbone.Model.extend({
url: 'http://localhost:3000/singIn',
defaults: {
email:"",
password:""
},
signIn: function() {
this.save();
}
});
var signInModel = new SignInModel();
Lastly, regarding authenticating a user, a model might not be the best way to handle this. There are a few SO questions regarding athenticating a user in Backbone apps, such as this one