findByAttribute in EmberJS - ember.js

Im using Ember v1.0.0, Ember-Data v1.0.0-beta.3 and building using Ember-tools.
Inside my order_controller, I've got an action called: delivered. Once triggered, I want to make some changes to the current object (no problems here) -- but I also want to query an object from this same model and make some changes to it.
Heres my ObjectController:
var OrderController = Ember.ObjectController.extend({
actions: {
edit: function(){
this.transitionToRoute('order.edit');
},
delivered: function(){
// orders are sorted by "sequence" attr.
var current_sequence = this.get('sequence');
// find the next order in pipeline
var next_sequence = current_sequence+=1;
// HERE is the challenge!
var next_order = App.Order.find({sequence: next_sequence});
this.set('up_next', false);
next_order.set('up_next', true);
this.transitionToRoute('order', next_order.id)
}
}
});
module.exports = OrderController;
Im using FIXTURES:
Order.FIXTURES = [
{
id: 1,
name: "John Doe",
email: "john#doe.com",
telephone: "263663636",
address: "123 Example Rd.",
......
sequence: 4,
done: false,
up_next: false
},
Basically Im looking for a way to query records from inside the ObjectController with more specific attributes than just ID.
Thanks!

// Find all the records, find returns a promise
var promise = this.get('store').find('order');
this.set('up_next', false);
next_order.set('up_next', true);
// once the promise is resolved
promise.then(function(records){
// filter out the first item to satisfy the method passed into it
// http://emberjs.com/api/classes/Ember.Array.html#method_find
var filteredRecord = records.find( function(record){ return record.get('sequence')==sequenceNo;});
this.transitionToRoute('order', next_order)
}

Related

How to bind a model property (from controller) without it firing validation right away?

I have a simple model backed controller with a simple validation on fullname. I added the validation to the models error computed property as shown below. It' works great except that this computed property is "fired" right away showing the "please enter a username" error right when the form is rendered.
Question is -how should I so this to get the nice computed property/2 way data bound property and error message but ... something that won't fire right away (instead waiting for the user to type something first).
var UserController = Ember.Controller.extend({
actions: {
submit: function() {
//verify model is legit ... transitionToRoute if so
}
}
});
var User = Ember.Object.extend({
enteredUsername: "",
username: function() {
var enteredUsername = this.get("enteredUsername");
return enteredUsername.trim();
}.property("enteredUsername"),
usernameError: function() {
var username = this.get("username");
if (!username) {
return "please enter a username";
}
}.property("username")
});
{{input type="text" value=model.enteredUsername}}
<span class="input-error">{{model.usernameError}}</span>
Like #Sisir said, you may need to have some sort of variable to check if the model value is dirty. Here is a way to get that implemented. Basically a model property will comprise of a value and isDirty property. So enteredUsername will be
enteredUsername: {
value: '',
isDirty: false
}
Your modified code will look like
var User = Ember.Object.extend({
enteredUsername: {
value: '',
isDirty: false
},
username: function() {
var value = this.get("enteredUsername.value").trim();
//Once dirty is set, then dont reset.
if(!this.get('enteredUsername.isDirty')) {
this.set('enteredUsername.isDirty', value.length > 0);
}
return value;
}.property('enteredUsername.value'),
usernameError: function() {
var username = this.get("username");
var isDirty = this.get('enteredUsername.isDirty');
if (!username && isDirty) {
return "please enter a username";
}
}.property('username', 'enteredUsername.isDirty')
});
Here is a working demo.

Trouble accessing data in relationships in Ember

I'm having trouble saving data in this model relationship. My models are as follows:
App.Flow = DS.Model.extend({
title: DS.attr('string'),
content: DS.attr('string'),
isCustom: DS.attr('boolean'),
params: DS.hasMany('parameter', {async: true})
});
App.Parameter = DS.Model.extend({
flow: DS.belongsTo('flow'),
param: DS.attr('string'),
param_tooltip: DS.attr('string'),
param_value: DS.attr('string')
});
As you can see, I want Flows to have multiple Parameters. I have a rudimentary setup using Flow and Parameter fixtures, which behave as expected in the templates. However, when I try to create new ones in the controller, I have trouble setting the flow and parameter values correctly.
var p = this.store.createRecord('parameter', {
param: "foo",
param_tooltip: "world",
param_value: "hello"
});
var f = this.store.createRecord('flow', {
title: 'job',
content: title,
isCustom: true,
params: [p] // doesn't seem to work
});
f.set('params', [p]); // doesn't seem to work
p.set('flow', f); // also doesn't seem to work
// Save the new model
p.save();
f.save();
I've tried a lot of solutions after staring at this and StackOverflow for a while (not just the ones listed). I'm not really sure what to try next. One thing that I noticed in the Ember inspector was that the ids of these created elements were not integers (they were something like the string 'fixture_0'), but I'm not really sure why that would be, whether its related, or how to fix it.
Thanks!
Edit
After dealing with promises ala kingpin's solution, the parameter seems like it is being set in the createFlow function I have when I check with print statements; however, I'm still having trouble accessing the parameters in both my template and in the removeFlow function.
createJob: function() {
// ...
f.get('params').then(function(params) {
params.pushObject(p);
});
f.get('params').then(function(params) {
console.log(params.toArray()[0].get('param')); // prints 'foo'
});
// ...
},
removeJob: function(flow) {
console.log(flow.get('title')); // prints 'job'
flow.get('params').then(function(params) {
var arr = params.toArray();
console.log(arr); // prints '[]'
for (var i=0; i < arr.length; i++) {
console.log('hi'); // never gets printed
arr[i].deleteRecord();
arr[i].save();
}
flow.deleteRecord();
flow.save();
});
},
params being async needs to be waited on before you can set a property or model on it (this is something that is being hardened out before 1.0 finally hits, but it's finicky right now in 1.0 beta). The fixture_ids are applied if you're using the fixture adapter.
var store = this.store;
var p = store.createRecord('parameter', {
param: "foo",
param_tooltip: "world",
param_value: "hello"
});
var f = this.store.createRecord('flow', {
title: 'job',
content: 'title',
isCustom: true,
});
f.get('params').then(function(params){
params.pushObject(p);
});
p.set('flow', f);
http://emberjs.jsbin.com/OxIDiVU/588/edit
Additionally saving using the fixture adapter seems to remove hasMany relationships when their is a manyToOne connection (aka both records have a relationship to each other, one of them being a hasMany). Getting rid of one of the relationships fixes the issue (or using one of the real adapters)
http://emberjs.jsbin.com/OxIDiVU/590/edit

How to dynamically add and remove views with Ember.js

I am trying to create an interface for traversing tables in a relation database. Each select represents a column. If the column is a foreign key, a new select is added to the right. This keeps happening for every foreign key that the user accesses. The number of selects is dynamic.
I made a buggy implementation that has code that manually adds and removes select views. I think it probably can be replaced with better Ember code (some kind of array object maybe?), I'm just not sure how to best use the framework for this problem.
Here's my JSBin http://jsbin.com/olefUMAr/3/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember template" />
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.1.2/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="my_template">
{{view fieldSelects}}
</script>
<div id="main"></div>
</body>
</html>
JavaScript:
App = Ember.Application.create();
var TemplatedViewController = Ember.Object.extend({
templateFunction: null,
viewArgs: null,
viewBaseClass: Ember.View,
view: function () {
var controller = this;
var viewArgs = this.get('viewArgs') || {};
var args = {
template: controller.get('templateFunction'),
controller: controller
};
args = $.extend(viewArgs, args);
return this.get('viewBaseClass').extend(args);
}.property('templateFunction', 'viewArgs'),
appendView: function (selector) {
this.get('view').create().appendTo(selector);
},
appendViewToBody: function () {
this.get('view').create().append();
}
});
var DATA = {};
DATA.model_data = {
"Book": {
"fields": [
"id",
"title",
"publication_year",
"authors"
],
"meta": {
"id": {},
"title": {},
"publication_year": {},
"authors": {
"model": "Author"
}
}
},
"Author": {
"fields": [
"id",
"first_name",
"last_name",
"books"
],
"meta": {
"id": {},
"first_name": {},
"last_name": {},
"books": {
"model": "Book"
}
}
}
};
var Controller = TemplatedViewController.extend({
view: function () {
var controller = this;
return this.get('viewBaseClass').extend({
controller: controller,
templateName: 'my_template'
});
}.property(),
selectedFields: null,
fieldSelects: function () {
var filter = this;
return Ember.ContainerView.extend({
controller: this,
childViews: function () {
var that = this;
var selectedFields = filter.get('selectedFields');
var ret = [];
var model = 'Book';
selectedFields.forEach(function (item, index, enumerable) {
var selection = item;
if (model) {
var select = that.makeSelect(model, that.getPositionIndex(), selection, true).create();
ret.pushObject(select);
model = DATA.model_data[model].meta[selection].model;
}
});
return ret;
}.property(),
nextPositionIndex: 0,
incrementPositionIndex: function () {
this.set('nextPositionIndex', this.get('nextPositionIndex') + 1);
},
getPositionIndex: function () {
var index = this.get('nextPositionIndex');
this.incrementPositionIndex();
return index;
},
setNextPositionIndex: function (newValue) {
this.set('nextPositionIndex', newValue+1);
},
makeSelect: function (modelName, positionIndex, selection, isInitializing) {
var view = this;
return Ember.Select.extend({
positionIndex: positionIndex,
controller: filter,
content: DATA.model_data[modelName].fields,
prompt: '---------',
selection: selection || null,
selectionChanged: function () {
var field = this.get('selection');
// Remove child views after this one
var lastIndex = view.get('length') - 1;
if (lastIndex > this.get('positionIndex')) {
view.removeAt(this.get('positionIndex')+1, lastIndex-this.get('positionIndex'));
view.setNextPositionIndex(this.get('positionIndex'));
}
if (! isInitializing && DATA.model_data[modelName].meta[field].model) {
var relatedModel = DATA.model_data[modelName].meta[field].model;
view.pushObject(view.makeSelect(relatedModel, view.getPositionIndex()).create());
}
// Reset ``isInitializing`` after the first run
if (isInitializing) {
isInitializing = false;
}
var selectedFields = [];
view.get('childViews').forEach(function (item, index, enumerable) {
var childView = item;
var selection = childView.get('selection');
selectedFields.pushObject(selection);
});
filter.set('selectedFields', selectedFields);
}.observes('selection')
});
}
});
}.property()
});
var controller = Controller.create({
selectedFields: ['authors', 'first_name']
});
$(function () {
controller.appendView('#main');
});
Approach:
I would tackle this problem using an Ember Component.
I have used a component because it will be:
Easily reusable
The code is self contained, and has no external requirements on any of your other code.
We can use plain javascript to create the view. Plain javascript should make the code flow easier to understand (because you don't have to know what Ember is doing with extended objects behind the scenes), and it will have less overhead.
Demo:
I have created this JSBin here, of the code below.
Usage
Add to your handlebars template:
{{select-filter-box data=model selected=selected}}
Create a select-filter-box tag and then bind your model to the data attribute, and your selected value array to the selected attribute.
The application:
App = Ember.Application.create();
App.ApplicationController = Ember.ObjectController.extend({
model: DATA.model_data,
selected: ['Author','']
});
App.SelectFilterBoxComponent = Ember.Component.extend({
template: Ember.Handlebars.compile(''), // Blank template
data: null,
lastCount: 0,
selected: [],
selectedChanged: function(){
// Properties required to build view
var p = this.getProperties("elementId", "data", "lastCount", "selected");
// Used to gain context of controller in on selected changed event
var controller = this;
// Check there is at least one property. I.e. the base model.
var length = p.selected.length;
if(length > 1){
var currentModelName = p.selected[0];
var type = {};
// This function will return an existing select box or create new
var getOrCreate = function(idx){
// Determine the id of the select box
var id = p.elementId + "_" + idx;
// Try get the select box if it exists
var select = $("#" + id);
if(select.length === 0){
// Create select box
select = $("<select id='" + id +"'></select>");
// Action to take if select is changed. State is made available through evt.data
select.on("change", { controller: controller, index: idx }, function(evt){
// Restore the state
var controller = evt.data.controller;
var index = evt.data.index;
var selected = controller.get("selected");
// The selected field
var fieldName = $(this).val();
// Update the selected
selected = selected.slice(0, index);
selected.push(fieldName);
controller.set("selected", selected);
});
// Add it to the component container
$("#" + p.elementId).append(select);
}
return select;
};
// Add the options to the select box
var populate = function(select){
// Only populate the select box if it doesn't have the correct model
if(select.data("type")==currentModelName)
return;
// Clear any existing options
select.html("");
// Get the field from the model
var fields = p.data[currentModelName].fields;
// Add default empty option
select.append($("<option value=''>------</option>"));
// Add the fields to the select box
for(var f = 0; f < fields.length; f++)
select.append($("<option>" + fields[f] + "</option>"));
// Set the model type on the select
select.data("type", currentModelName);
};
var setModelNameFromFieldName = function(fieldName){
// Get the field type from current model meta
type = p.data[currentModelName].meta[fieldName];
// Set the current model
currentModelName = (type !== undefined && type.model !== undefined) ? type.model : null;
};
// Remove any unneeded select boxes. I.e. where the number of selects exceed the selected length
if(p.lastCount > length)
for(var i=length; i < p.lastCount; i++)
$("#" + p.elementId + "_" + i).remove();
this.set("lastCount", length);
// Loop through all of the selected, to build view
for(var s = 1; s < length; s++)
{
// Get or Create select box at index s
var select = getOrCreate(s);
// Populate the model fields to the selectbox, if required
populate(select);
// Current selected
var field = p.selected[s];
// Ensure correct value is selected
select.val(field);
// Set the model for next iteration
setModelNameFromFieldName(field);
if(s === length - 1 && type !== undefined && type.model !== undefined)
{
p.selected.push('');
this.notifyPropertyChange("selected");
}
}
}
}.observes("selected"),
didInsertElement: function(){
this.selectedChanged();
}
});
How it works
The component takes the two parameters model and selected then binds an observer onto the selected property. Any time the selection is changed either through user interaction with the select boxes, or by the property bound to selected the view will be redetermined.
The code uses the following approach:
Determine if the selection array (selected) is greater than 1. (Because the first value needs to be the base model).
Loop round all the selected fields i, starting at index 1.
Determine if select box i exists. If not create a select box.
Determine if select box i has the right model fields based on the current populated model. If yes, do nothing, if not populate the fields.
Set the current value of the select box.
If we are the last select box and the field selected links to a model, then push a blank value onto the selection, to trigger next drop down.
When a select box is created, an onchange handler is hooked up to update the selected value by slicing the selected array right of the current index and adding its own value. This will cause the view to change as required.
A property count keeps track of the previous selected's length, so if a change is made to a selection that decreases the current selected values length, then the unneeded select boxes can be removed.
The source code is commented, and I hope it is clear, if you have any questions of queries with how it works, feel free to ask, and I will try to explain it better.
Your Model:
Having looked at your model, have you considered simplifying it to below? I appreciate that you may not be able to, for other reasons beyond the scope of the question. Just a thought.
DATA.model_data = {
"Book": {
"id": {},
"title": {},
"publication_year": {},
"authors": { "model": "Author" }
},
"Author": {
"id": {},
"first_name": {},
"last_name": {},
"books": { "model": "Book" }
}
};
So field names would be read off the object keys, and the value would be the meta data.
I hope you find this useful. Let me know if you have any questions, or issues.
The Controller:
You can use any controller you want with this component. In my demo of the component I used Ember's built in ApplicationController for simplicity.
Explaination of notifyPropertyChange():
This is called because when we are inserting an new string into the selected array, using the push functionality of arrays.
I have used the push method because this is the most efficient way to add a new entry into an existing array.
While Ember does have a pushObject method that is supposed to take care of the notification as well, I couldn't get it to honour this. So this.notifyPropertyChange("selected"); tells Ember that we updated the array. However I'm hoping that's not a dealbreaker.
Alternative to Ember Component - Implemented as a View
If you don't wish to use it in Component format, you could implement it as a view. It ultimately achieves the same goal, but this may be a more familiar design pattern to you.
See this JSBin for implementation as a View. I won't include the full code here, because some of it is the same as above, you can see it in the JSBin
Usage:
Create an instance of App.SelectFilterBoxView, with a controller that has a data and selected property:
var myView = App.SelectFilterBoxView.create({
controller: Ember.Object.create({
data: DATA.model_data,
selected: ['Author','']
})
});
Then append the view as required, such as to #main.
myView.appendTo("#main");
Unfortunately your code doesn't run, even after adding Ember as a library in your JSFiddle, but ContainerView is probably what you're looking for: http://emberjs.com/api/classes/Ember.ContainerView.html as those views can be dynamically added/removed.
this.$().remove() or this.$().append() are probably what you're looking for:
Ember docs.

Ember: use controller data in route or how to fetch data properly

This question is a follow up on my previous question: Architecture for reusable object in ember
In my app I create multiple charts using an Ember.Component. The daterange for all the charts is controlled by a Daterangepicker which has its own controller etc.. Now the data for each chart is fetched in the IndexRoute (with an ajax call), and the daterange is passed in the query string.
The problem is that I can't seem to figure out how to access the daterange from the IndexRoute. Here's my code:
IndexRoute.js
App.IndexRoute = Ember.Route.extend({
model: function(){
var that = this;
return Ember.Object.extend({
registrationsData: null,
registrations: function() {
var self = this;
$.ajax({
url: Routing.generate('ysu_user_api_statistics_registrations', {startDate: that.dateRange.startDate, endDate: that.dateRange.endDate}),
success: function(data) {
var labels = [];
var values = [];
var chartData = {
labels : data.labels,
datasets : [
{
data : data.values,
}
],
};
self.set('registrationsData', chartData);
}
});
}.property(),
}).create();
},
dateRange: Ember.Object.create({
id: 1,
startDate: '2013-08-01',
endDate: '2013-08-31'
}),
});
Index.hbs
{{ my-chart title="Registrations" dataBinding=model.registrations registrationsDataBinding=model.registrationsData}}
MyChartComponent.js
App.MyChartComponent = Ember.Component.extend({
...
dataBinding: null,
registrationsDataBinding: null,
dateRangeBinding: null,
modelDateRangeBinding: null,
chartContext: null,
myChartController: null,
didInsertElement: function() {
/* Create and set controller */
if (!this.get('myChartController')) {
myChartController = new App.MyChartController()
this.set('myChartController', myChartController);
}
this.set('chartContext', $(this.get('element')).find('canvas')[0].getContext("2d"));
},
drawChart: function() {
if(this.get('chartContext')) {
var ctx = this.get('chartContext');
var options = {
bezierCurve : false,
pointDotRadius : 6,
pointDotStrokeWidth : 4,
datasetStrokeWidth : 4,
}
var myNewChart = new Chart(ctx).Line(this.get('registrationsDataBinding'), options);
}
}.observes('registrationsDataBinding', 'myChartController.dateRange'),
});
MyChartController.js
App.MyChartController = Ember.ArrayController.extend({
container: App.__container__,
needs: ['daterangepicker'],
dateRange: 'controllers.daterangepicker.selectedRange',
dateRangeBinding: 'controllers.daterangepicker.selectedRange',
});
I must admit, this setup feels kinda weird. So ultimately my question is:
What would be the correct way to fetch data for my charts based on startDate and endDate set in my DatePickerController?
I have been struggling with this problem as well.
In some of my apps, I've needed the URL to control the date range (e.g. a particular month). In these cases, I would created a MonthRoute and a MonthModel - think of it as a monthly report. The MonthModel has a hasMany property of the actual data I wanted to chart:
App.Month = DS.Model.extend({
companies: DS.hasMany('App.Company')
});
A datepicker would let the user enter a new route, which would fetch (say) the Jan-2013 month model
{
month: {
id: 'Jan-2013',
companies: [
{name: 'Acme, Inc', revenue: 10425, ...},
...
]
}
}
Then, I would set the embedded companies data on my CompaniesController in the setupController hook:
App.MonthRoute = Ember.Route.extend({
setupController: function(controller, model) {
controller.set('model', model);
this.controllerFor('companies').set('model', model.get('companies'));
}
});
Then, I would do the various array manipulations on my CompaniesController, and make that data available to my charts.
I have some code for this up on github, as well as a demo. I'd be interested to hear your thoughts.

Fullcalendar, backbone.js, Cannot edit event

So, I think I am in over my head here. I am trying to get fullcalendar to work with backbone and django. I am still learning all of this but I can now make new events and save them via django-tastypie, and they do show up in the calendar, wohoo! However, I can not edit or drag them. Uncaught TypeError: Cannot call method 'isNew' of undefined line 96, is what I get when events are clicked and Uncaught TypeError: Cannot call method 'save' of undefined line 78. I have done my best to figure this out, but no success. Why is this.model.isnew() undefined in render and the same for save? I do not fully understand all of this so I have probably made some stupid mistake somewhere or misunderstood how everything works. I would be grateful if anyone could give me a hint.
I added console.log(fcEvent); to eventClick, and when I inspect it, it says start and end dates are invalid. Does anyone know what that means? If I inspect the same object just after it was added with addOne, the dates are valid. I am also using https://github.com/PaulUithol/backbone-tastypie if that matters.
edit: Tried this to make sure events.fetch() succeeded, this resulted in no events in the calendar whatsoever. Does that mean that events.fetch() never succeeds? I can see "GET /api/event/ HTTP/1.1" 200 6079 in the log.
alternative fetch:
events.fetch({
success: function(){
new EventsView({el: $("#calendar"), collection: events}).render();
}});
Original program:
$(function(){
var Event = Backbone.Model.extend();
var Events = Backbone.Collection.extend({
model: Event,
url: '/api/event/'
});
var EventsView = Backbone.View.extend({
initialize: function(){
_.bindAll(this);
this.collection.bind('reset', this.addAll);
this.collection.bind('add', this.addOne);
this.collection.bind('change', this.change);
this.collection.bind('destroy', this.destroy);
this.eventView = new EventView();
},
render: function() {
this.$el.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicDay'
},
selectable: true,
selectHelper: true,
editable: true,
ignoreTimezone: false,
disableResizing:false,
select: this.select,
defaultView: 'agendaWeek',
eventClick: this.eventClick,
eventDrop: this.eventDropOrResize,
eventResize: this.eventDropOrResize,
events: 'events'
});
},
addAll: function() {
this.$el.fullCalendar('addEventSource', this.collection.toJSON());
},
addOne: function(event) {
this.$el.fullCalendar('renderEvent', event.toJSON(), true);
},
select: function(start, end, allDay) {
var eventView = new EventView();
console.log('select');
eventView.collection = this.collection;
eventView.model = new Event({start: start, end: end, allDay: allDay});
eventView.render();
},
eventClick: function(fcEvent) {
console.log('click');
this.eventView.collection = this.collection;
this.eventView.model = this.collection.at(fcEvent.id);
console.log(fcEvent);
this.eventView.render();
},
change: function(event) {
// Look up the underlying event in the calendar and update its details from the model
var fcEvent = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
fcEvent.title = event.get('title');
fcEvent.color = event.get('color');
console.log('change');
this.$el.fullCalendar('updateEvent', fcEvent);
},
eventDropOrResize: function(fcEvent) {
console.log(fcEvent);
// Lookup the model that has the ID of the event and update its attributes
this.eventView.collection.at(fcEvent.id).save({start: fcEvent.start, end: fcEvent.end});
},
destroy: function(event) {
this.$el.fullCalendar('removeEvents', event.id);
}
});
var EventView = Backbone.View.extend({
el: $('#eventDialog'),
initialize: function() {
_.bindAll(this);
},
render: function() {
var buttons = {'Ok': this.save};
if (!this.model.isNew()) {
_.extend(buttons, {'Delete': this.destroy});
}
_.extend(buttons, {'Cancel': this.close});
this.$el.dialog({
modal: true,
title: (this.model.isNew() ? 'New' : 'Edit') + ' Event',
buttons: buttons,
open: this.open
});
return this;
},
open: function() {
this.$('#title').val(this.model.get('title'));
this.$('#color').val(this.model.get('color'));
},
save: function() {
this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val(),});
console.log('save');
if (this.model.isNew()) {
this.collection.create(this.model, {success: this.close,wait: true });
} else {
this.model.save({}, {success: this.close});
}
},
close: function() {
this.$el.dialog('close');
},
destroy: function() {
this.model.destroy({success: this.close});
}
});
var events = new Events();
new EventsView({el: $("#calendar"), collection: events}).render();
events.fetch();
});
You can try this. The issue comes down to an undefined Model.
On this line.
select: function(start, end, allDay) {
var eventView = new EventView();
eventView.collection = this.collection;
eventView.model = new Event({start: start, end: end, allDay: allDay});
eventView.render();
},...
Change it to. I have a feeling that your Model is not being instantiated properly.
select: function(start, end, allDay) {
var eventView = new EventView({
collection: this.collection,
model: new Event({start: start, end: end, allDay: allDay})
});
eventView.render();
},
Another issue is, you're instantiating the EventsView and passing in the collection and models before the fetch call.
var events = new Events();
$.when(events.fetch()).then(function() {
// Create the Events view when the Events asynchronous operation completes.
new EventsView({el: $("#calendar"), collection: events}).render();
});
Edit: here's a JS Bin for additional changes.
I got this working except for events not actually disappearing from the calendar, even though they are deleted in the database. I dont know if this is the correct way to do this, probably not, but it worked. Model was undefined in EventView so I had to get the model from the collection and pass it on to EventView.
eventClick: function(fcEvent) {
console.log(fcEvent.id);
this.mymodel = this.collection.where({'id':fcEvent.id})[0];
this.eventView = new EventView({collection: this.collection, model: this.mymodel})
this.eventView.render();
},
change: function(event) {
// Look up the underlying event in the calendar and update its details from the model
var fcEvent = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
fcEvent.title = event.get('title');
fcEvent.color = event.get('color');
console.log('change');
this.$el.fullCalendar('updateEvent', fcEvent);
},
eventDropOrResize: function(fcEvent) {
console.log(fcEvent);
// Lookup the model that has the ID of the event and update its attributes
this.collection.where({'id':fcEvent.id})[0].save({start: fcEvent.start, end: fcEvent.end});
},