This might just be me not understanding Marionette's auto rendering, but I've been trying to add a model to my collection using .create and have been running into issues.
Calling .create hits the server, gets a successful response, and automatically hits my itemView.
What I need to do is call .create, get a successful response, and fire the callback in my create call.
My code currently looks like this:
collection.create(data, {
wait: true,
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});
My success and error callbacks get totally ignored and the itemView is automatically initialized. Any thoughts?
I'm trying to reproduce but for me it works well. I'm using sinon.js fake server for this example. Hope my code could be helpful.
html:
<div id="app">
<div id="appRegion">nothing yet here</div>
</div>
js:
// fake API
var server = sinon.fakeServer.create();
server.respondWith("GET", "/api/models", [200, {
"Content-Type": "application/json"
},
JSON.stringify([{
'name': 'foo'
}, {
'name': 'bar'
}])]);
server.respondWith("POST", "/api/models", [200, {
"Content-Type": "application/json"
},
JSON.stringify({
'name': 'bazz'
})]);
// application
var Collection = Backbone.Collection.extend({
model: Backbone.Model,
url: "/api/models"
});
var MyApp = Marionette.Application.extend({
regions: {
appRegion: '#appRegion'
}
}),
MyView = Marionette.ItemView.extend({
className : 'myView',
template: _.template('<b><%=name%></b>')
}),
CollectionView = Marionette.CollectionView.extend({
childView: MyView
})
var collection = new Collection();
var myApp = new MyApp({
container: '#app'
});
var collectionView = new CollectionView({
collection: collection
});
myApp.appRegion.show(collectionView);
collection.fetch();
server.respond();
collection.create({}, {
wait: true,
success: function(model) {
console.log('success %o', model);
}
});
setTimeout(function(){
server.respond();
},2000)
Related
I have been pretty much beginner at this part of javascript and I would appreciate any ideas how could be solved this problem.
I use requirejs to define my own modules where I also use backbone.js.
Let say I have the main module where I initialize my Backbone view which is rendered without any problem. Also, the click event where is calling method createSchemeForm creates the form correctly. The problem raises up in a situation when I call cancel method by click and the modules which are defined for Backbone view (e.g. "unicorn/sla/dom/helper"...) are undefined but when I called method createSchemeForm at the beginning the modules were executed without any problem.
Thank you in advance for any suggestions.
Backbone view
define("unicorn/sla/view/scheme", [
"unicorn/sla/dom/helper",
"unicorn/soy/utils",
"unicorn/sla/utils"
], function (DOMHelper, soyUtils, jsUtils) {
return Backbone.View.extend({
el: 'body',
inputData: {},
btnSaveScheme: 'btn-save-sla-scheme',
btnCancel: 'btn-cancel-sla-scheme',
btnCreate: 'btn-create-sla-scheme',
btnContainer: '#sla-scheme-buttons-container',
schemeContent: '#sla-scheme-content-section',
btnSpinner: '.button-spinner',
events: {
'click #btn-create-sla-scheme' : "createSchemeForm",
'click #btn-cancel-sla-scheme' : "cancel"
},
initialize: function(){
console.log("The scheme view is initialized...");
this.render();
},
createSchemeForm: function () {
this.spin();
DOMHelper.clearSchemeContent();
DOMHelper.clearButtonsContainer();
//Get button
$btnSave = soyUtils.getButton({isPrimary: 'true', id: this.btnSaveScheme, label: 'Save'});
$btnCancel = soyUtils.getButton({isPrimary: 'false', id: this.btnCancel, label: 'Cancel'});
//Append new created buttons
DOMHelper.addContent(this.btnContainer, AJS.format("{0}{1}", $btnSave, $btnCancel));
//Call service to get entry data for scheme creation form
AJS.$.ajax({
url: AJS.format('{0}={1}',AJS.I18n.getText('rest-url-project-scheme-input-data'), jsUtils.getProjectKey()) ,
type: "post",
async: false,
context: this,
global: false,
}).done(function (data) {
this.inputData = data;
$slaSchemeForm = soyUtils.getSchemeCreateForm({slaScheme : data, helpText: AJS.I18n.getText("sla-time-target-tooltip-text")});
DOMHelper.addContent(this.schemeContent, $slaSchemeForm);
jsUtils.scroll(this.schemeContent, 'slow');
}).fail(function () {
jsUtils.callFlag('error', AJS.I18n.getText("message-title-error"), AJS.I18n.getText("sla-error-load-scheme-input-data"));
}).always(function () {
this.stopSpin();
});
},
spin: function () {
AJS.$('.button-spinner').spin();
},
stopSpin: function () {
AJS.$('.button-spinner').spinStop();
},
cancel: function () {
jsUtils.clearButtonsContainer();
jsUtils.clearSchemeContent();
$btnCreateScheme = soyUtils.getButton({isPrimary: 'false', id: this.btnCreate, label: 'Create SLA Scheme'});
DOMHelper.addContent(this.btnContainer, $btnCreateScheme);
DOMHelper.addContent(this.schemeContent, soyUtils.getSchemesTable(new Array())); // TODO - get current data from server instead of empty array
}
});
});
Main module where is Backbone view initialize
define("unicorn/sla/project/batch", [
"unicorn/sla/utils",
"unicorn/sla/data/operations",
"unicorn/sla/data/validator",
"unicorn/sla/dom/helper",
"unicorn/sla/model/confirm/message",
"unicorn/sla/view/scheme",
"exports"
], function (jsUtils, operations, validator, DOMHelper, ConfirmMessage, SchemeView, exports) {
//Load project batch
exports.onReady = function () {
$schemeView = new SchemeView();
$schemeView.render();
}
});
AJS.$(function () {
AJS.$(document).ready(function () {
require("unicorn/sla/project/batch").onReady();
});
});
I am getting a long array from PHP containing various data objects.
[{"commid":"1","uid":"0","pid":"3","comment":"comm","parid":null,"date":"2016-10-27 15:03:10"},
{"commid":"2","uid":"0","pid":"10","comment":"Ana","parid":null,"date":"2016-10-27 15:03:51"},
{"commid":"3","uid":"0","pid":"5","comment":"asss!","parid":null,"date":"2016-10-27 15:05:50"},
{"commid":"4","uid":"0","pid":"10","comment":"Lawl?","parid":null,"date":"2016-10-27 17:03:59"},
{"commid":"5","uid":"0","pid":"14","comment":"sd","parid":null,"date":"2016-11-06 00:25:04"},
{"commid":"6","uid":"0","pid":"14","comment":"sds","parid":null,"date":"2016-11-06 00:25:50"},
{"commid":"7","uid":"0","pid":"14","comment":"WOW!","parid":null,"date":"2016-11-08 15:06:18"},
{"commid":"8","uid":"0","pid":"13","comment":"Hello!?","parid":null,"date":"2016-11-08 15:14:30"}]
My Backbone View which will be rendering the data is
var WorkPage = Backbone.View.extend({
el: $('#indexcontent'),
render: function() {
Backbone.history.navigate('work');
var _this = this;
this.$el.html(workHTML);
$.ajax({
type: "GET",
url: "includes/server_api.php/work",
data: '',
cache: false,
success: function(html) {
console.log(html);
var compiledTemplate = _.template($('#content-box').html(), html);
_this.$el.html(compiledTemplate);
},
error: function(e) {
console.log(e);
}
});
return false;
}
});
My workHTML which will be rendered by Underscore is
<script type="text/template" id="content-box">
<div class="workhead">
<h3 class="msg comment"><%= comment%></h3>
<p class="date"><%= date%></p>
</div>
</script>
<div id="content-box-output"></div>
How do I implement a underscore loop here?
You should take advantage of Backbone's features. And to do that, you need to understand how to use a REST API with Backbone.
Backbone's Model is made to manage a single object and handle the communication with the API (GET, POST, PATCH, PUT requests).
Backbone's Collection role is to handle an array of model, it handles fetching it (GET request that should return a JSON array of objects) and it also parse each object into a Backbone Model by default.
Instead of hard-coding a jQuery ajax call, use a Backbone collection.
var WorkCollection = Backbone.Collection.extend({
url: "includes/server_api.php/work",
});
Then, modularize your views. Make an item view for each object of the array you received.
var WorkItem = Backbone.View.extend({
// only compile the template once
template: _.template($('#content-box').html()),
render: function() {
// this is how you pass data to the template
this.$el.html(this.template(this.model.toJSON()));
return this; // always return this in the render function
}
});
Then your list view looks like this:
var WorkPage = Backbone.View.extend({
initialize: function(options) {
this.itemViews = [];
this.collection = new WorkCollection();
this.listenTo(this.collection, 'reset', this.render);
// this will make a GET request to
// includes/server_api.php/work
// expecting a JSON encoded array of objects
this.collection.fetch({ reset: true });
},
render: function() {
this.$el.empty();
this.removeItems();
this.collection.each(this.renderItem, this);
return this;
},
renderItem: function(model) {
var view = new WorkItem({
model: model
});
this.itemViews.push(view);
this.$el.append(view.render().el);
},
// cleanup to avoid memory leaks
removeItems: function() {
_.invoke(this.itemViews, 'remove');
this.itemViews = [];
}
});
It's unusual to set the url in the render function, you should keep the responsibilities scoped to the right place.
The router could be something like:
var Router = Backbone.Router.extend({
routes: {
'work': 'workPage'
},
workPage: function() {
var page = new WorkPage({
el: $('#indexcontent'),
});
}
});
Then, if you want to see the work page:
var myRouter = new Router();
Backbone.history.start();
myRouter.navigate('#work', { trigger: true });
Templates and RequireJS
My index.html page contains this
indexcontent div but the content-box which contains the template
format which we are compiling is stored in different work.html. So,
if i dont load this work.html in my main index.html i am unable to
access content-box.
I would recommend to use the text require.js plugin and load each template for the view like this:
The work-item.js file:
define([
'underscore', 'backbone',
'text!templates/work-item.html',
], function(_, Backbone, WorkItemTemplate) {
var WorkItem = Backbone.View.extend({
template: _.template(WorkItemTemplate),
/* ...snip... */
});
return WorkItem;
});
The work-page.js file:
define([
'underscore', 'backbone',
'text!templates/work-page.html',
], function(_, Backbone, WorkPageTemplate) {
var WorkPage = Backbone.View.extend({
template: _.template(WorkPageTemplate),
});
return WorkPage;
});
In your index.html file you need to have _.each() method to iterate throught each element
<% _.each(obj, function(elem){ %>
<div class="workhead">
<h3 class="msg comment"><%= elem.comment %></h3>
<p class="date"><%= elem.date%></p>
</div>
<% }) %>
I make variable of your response just to have data to work with. In your View you need to set point on template
template: _.template($("#content-box").html()), and in render method just send data as object.
Here is working code : jsFiddle
Here is one way to load the template for each value in the data array.
var WorkPage = Backbone.View.extend({
el: $('#indexcontent'),
render: function() {
Backbone.history.navigate('work');
var _this = this;
this.$el.html(workHTML);
$.ajax({
type: "GET",
url: "includes/server_api.php/work",
data: '',
cache: false,
success: function(data) {
console.log(data);
var $div = $('<div></div>');
_.each(data, function(val) {
$div.append(_.template($('#content-box').html(), val));
});
_this.$el.html($div.html());
},
error: function(e) {
console.log(e);
}
});
return false;
}
});
I am creating a crud web app with backbone. I am writing the functionality to update a resource (PUT). I am trying to achieve this by fetching a models properties from the server (see the SubscriberView) and on successfully fetching the resource to instantiate a SubscriberEditView whereby the newly fetched model is passed.
So far this works as expected; SubscriberEditView renders an html form which is populated with the model instance properties.
When I enter a new login value into the form I can trigger the update function which successfully makes a PUT request to the server resource and updates the model instance as expected.
However, the problem is that when I then repeat this process with another model instance the PUT request is made against the curent model AND the previously instantiated model.
Is the reason for this because I now have two instances of SubscriberEditView? Or is it something else that I have missed/misunderstood.
Please see below the described code.
// The view for a single subscriber
var SubscriberView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#subscribers-tmpl').html()),
initialize: function() {
this.listenTo(this.model, 'destroy', this.remove);
},
render: function() {
var html = this.template(this.model.toJSON());
this.$el.html(html);
return this;
},
events: {
'click .remove': 'onRemove',
'click .edit-subscriber': 'editSubscriber',
},
editSubscriber: function() {
var getSubscriberModel = this.model.set('id', this.model.attributes.id, {silent:true})
getSubscriberModel.fetch({
success: function (model, response) {
$('#addSubscriber').fadeOut();
new SubscriberEditView({model:model});
},
error: function (response) {
console.log('There was an error');
}
});
},
onRemove: function() {
this.model.destroy();
}
});
// The edit view
var SubscriberEditView = Backbone.View.extend({
tagName: 'div',
el: '#updateSubscriber',
template: _.template($('#subscriberEdit-tmpl').html()),
initialize: function() {
this.model.on('sync', this.render, this);
},
events: {
'click #close': 'cancel',
'click .save-subscriber': 'update'
},
update: function() {
var $login = this.$('#login');
this.model.save({
login: $login.val(),
},
{
dataType: 'text',
success: function (model, response, options) {
console.log('success');
},
error: function (model, response, options) {
console.log('error');
}
});
},
cancel: function() {
$('#addSubscriber').fadeIn();
$('#editInner').fadeOut();
},
render: function() {
var html = this.template(this.model.toJSON());
this.$el.html(html);
},
});
If anyone could help then that would be greatly appreciated.
Cheers
The issue is el: '#updateSubscriber',. All your view instances are pointing to same element to which events are delegated. So clicking on any of the .save-subscriber will trigger update for all the view instances. You should not specify el for a view that is going to have more than one instance.
New to backbone, I'm approaching it with trivial example but i'm stuck on events triggering.
In my page i GET some data from the server and initialize a view with them.
Then i can change the data through a form, they are saved to the server and the template is updated soon after with the new data. The data are fetched, saved and the view is updated but I can see through the console that the render function is called sometime twice, sometime even 4 times! And the call to the server, too, is made up to for time as GET, PUT, GET, GET.
What am i doing wrong?
<script type="text/x-handlebars-template" id="modelTpl">
<ul>
<li><strong>Nome:</strong> {{nome}}</li>
<li><strong>Cogome:</strong> {{cognome}}</li>
</ul>
<input type="text" id="nome" />
<input type="text" id="cognome" />
<a id="changeBtn">Modifica</a>
</script>
Model = Backbone.Model.extend({
urlRoot: 'server/model.php/model',
defaults: {
nome: "",
cognome: ""
}
});
var model = new Model({id: 1});
View = Backbone.View.extend({
el: '#wrapper',
template: Handlebars.compile($('#modelTpl').html()),
events: {
"click #changeBtn": "change"
},
initialize: function(){
this.render();
this.listenTo(this.model, "change", this.render);
},
render: function(){
console.log('render');
var self = this;
this.model.fetch({
error: function(model, response, options) { },
success: function(model, response, options) {
var data = model.toJSON();
self.$el.html(self.template(data));
}
});
return this;
},
change: function() {
var n = this.$('#nome').val();
var c = this.$('#cognome').val();
this.model.save({ nome: n, cognome: c }, {
error: function(model, response, options) { },
success: function(model, response, options) { }
});
}
});
var view = new View({ model: model });
I know its late to answer this question now. However it may help other, so try _.debounce
this.change = _.debounce(this.change, 300);
I'm new to backbone and I'm trying to send and receive data from the server in Json format. It just won't work. Here's my code (BTW, I'm using backbone aura):
Collection
define(['sandbox', '../models/message'], function(sandbox, Message) {
'use strict';
var Messages = sandbox.mvc.Collection({
model: Message,
url: '/messagelist.php',
localStorage: new sandbox.data.Store('messages-backbone-require'),
parse: function(response){
return response.rows;
}
});
return Messages;
});
Model
define(['sandbox'], function(sandbox) {
'use strict';
var Message = sandbox.mvc.Model({
defaults: {
opened: '',
messageid: '',
phonenumber: '',
numbername: '',
text: ''
},
parse: function(data){
return data;
}
});
return Message;
});
View
define(['sandbox', '../models/message', 'text!../templates/incoming_messages.html'], function(sandbox, Message, incomingMessagesTemplate) {
'use strict';
var AppView = sandbox.mvc.View({
widgetTemplate: sandbox.template.parse(incomingMessagesTemplate),
events: {
'click .refresh': 'refresh'
},
initialize: function() {
this.$el.html(this.widgetTemplate);
sandbox.events.bindAll(this);
this.collection.bind('createMessageList', this.createMessageList);
},
createMessageList: function() {
// Will work with the received data here
},
render: function() {
var handle = 'h4';
this.$el.draggable({handle: handle});
this.createMessageList();
},
refresh: function() {
this.createMessageList();
}
});
return AppView;
});
Main
define(['sandbox', './views/app', './collections/messages'], function(sandbox, AppView, Messages) {
'use strict';
return function(options) {
var messages = new Messages();
new AppView({
el: sandbox.dom.find(options.element),
collection: messages
}).render();
messages.fetch({
data: {
type: 'incoming',
offset: 0,
offsetcount: 25
},
type: 'GET',
success: function() {
console.log(messages.models); // Shows an empty array.
}
});
};
});
I've check logs and it seems that the ajax request (collection.fetch()) is not firing or is not able to communicate with the server. How can I fix this?
The problem is with the Backbone.LocalStorage plugin. When you assign Collection.localStorage, the plugin takes over the fetch command and reads the data from local storage instead of the server.
See my answer in this SO question on some options on how to solve this.