Given a panel
var panel = new Backbone.CollectionView({...})
How do I get the current model being sorted?
panel.on('sortStart', function(e) {
var index = something;
});
I suppose you use some kind of UI manipulation tool for example jQuery UI. As Lesha said in her comment it can be done through triggering of event on the model view.
//creting children view
var PanelItem = Backbone.View.extend({
events: {
"sortStart": "sortEventPropagation"
},
initialize : function (options) {
this.parentView = options.parentView;
},
sortEventPropagation: function(){
this.parentView.trigger('sort:start:propagated', this.model);
},
})
Everytime you are creating panelItem view you need to pass it panel in options as parentView.
var childView = new PanelItem({
parentView: panel
})
And on panel you could easily listenTo sort:start:propagated event
var Panel = Backbone.CollectionView.extend({
initialize: function(){
this.listenTo(this, 'sort:start:propagated', function(model){
//Do magic with model
})
},
})
Related
I am working in Marionette and have an accordion which we have set up so that the individual panels are templates that are called in and created by
var AccorionView = require(“../folder/AccordionView”);
var expandButtons = require(“../folder/expandButtons”);
var MainPage = Marionette.View.extend({
regions: {
region: “.region”,
button: “.buttons”
},
this.newAccordion = new AccordionView({
header: “header goes here”,
childView: new panelView(),
});
this.showChildView(‘region’, this.newAccordion);”
I am going to pull in another view with the actual Expand/Collapse All button in it, which will expand and collapse all of the accordion panels on this page. The JavaScript that would be used on this page would be
expandAll: function() {
this.newAccordion.expand();
},
However, this function will be put into the new JavaScript view of the buttons. I am going to send the names of the accordion panels to the button view when calling it into this page, but how do I get the function on that view to influence the accordion panels on this main page?
I would use Backbone.Radio in this case:
const Radio = require('backbone.radio');
const accorionChannel = Radio.channel('accorion');
const MainPage = Marionette.View.extend({
// ...
initialize() {
accorionChannel.on('expand', function() {
this.newAccordion.expand();
});
accorionChannel.on('unexpand', function() {
this.newAccordion.unexpand();
});
}
// ...
});
const WhateverView = Marionette.View.extend({
someEventHandler() {
accorionChannel.trigger('expand');
// OR
accorionChannel.trigger('unexpand');
}
});
Radio channel is singleton, you can create a new one every time but it will refer to the same channel. This saves you from passing the channel variable around or having a global variable.
You can do this one of two ways
1) With triggers/childViewEvents
// in expandButtons
expandButtons = Marionette.View.extend(
triggers: {
'click #ui.expandAll': 'expandAll'
}
);
// in MainPage
MainPage = Marionette.View.extend({
childViewEvents: {
'expandAll': 'expandAll'
},
expandAll: function(child) {
this.newAccordion.expand();
// OR
this.getChildView('region').expand();
}
})
OR
2) With Backbone.Radio
// in expandButtons
var Radio = require('Backbone.Radio');
var expandChannel = Radio.channel('expand');
var expandButtons = Marionette.View.extend({
events: {
'click #ui.expandAll': 'expandAll'
},
expandAll: function(e) {
expandChannel.trigger('expand:all');
}
});
// in AccordionView
var AccordionView = Marionette.View.extend({
channelName: 'expand',
radioEvents: {
'expand:all': 'expand' // triggers this.expand();
}
});
In this case, it might be even easier to do #2 but instead of adding the radio listener to the AccordionView, attach the listeners to the PanelView (AccordionView's childView). This is because AccordionView's expand function will likely have to iterate each of its children like:
this.children.each(function(childView) {
childView.expand();
});
I'm having an issue when I am trying to switch the view after a model save on a click event.
The flow I am trying to create is a reorder process, the user will have a confirmation page to reorder. On clicking submit an api call will execute and the invoice page will load on success.
Currently when I click the submit button the first time nothing happens and when i click again I can get an invoice page. no such issue for the cancel button.
var confirmView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template( $("#confirmReorder_template").html());
this.$el.html(template);
},
events: {
"click #submitButton": "submitReorder",
"click #cancelButton": "cancelReorder"
},
submitReorder: function(event){
var URI='<config property="api.url.itemReorder"/>';
var ItemReorderModel = new itemReorderModel({url:URI});
$("#submitButton").click(function(event) {
event.preventDefault();
ItemReorderModel.set('id','1');
ItemReorderModel.save( {}, {
success : function() {
var response = ItemReorderModel.toJSON();
var InvoiceView = new invoiceView({el: $("#itemData")});
},
error : function(model, xhr, options) {
}
});
});
},
cancelReorder: function(event){
document.location.href = "items_list.ctl";
}
});
second view
var invoiceView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template( $("#reorderInvoice_template").html());
this.$el.html(template);
},
events: {
"click #returnButton": "itemlist",
"click #printButton": "print"
},
itemlist: function(event){
document.location.href = "items_list.ctl";
},
print: function(event){
}
});
loading of first view
$(document).ready(function() {
var ConfirmView = new confirmView({el:$('#itemData')});
});
I'm new to backbone so not sure if I should be using a route, I also have read something about binding, but still trying to get my head around how it all works.
any advice is much appreciated.
You are binding a new event handler in submitReorder method, and your actual functionality is inside that event handler.
So the fist time you click the button, the event handler delegated toview via backbone event hash will trigger submitReorder, which binds a new event handler with actual functionality directly to the button element.
Next time when you click it, this new direct handler will also trigger and fire the functionality you expect.
Each time you click the button you're adding a new event handler.
Your code should be simply:
submitReorder: function(event){
event.preventDefault();
var URI='<config property="api.url.itemReorder"/>';
//-----^------ if this is hardcoded, why not specify this in the model itself..?
var ItemReorderModel = new itemReorderModel({url:URI});
//-------------^----------- why not do this just once while initializing view..?
ItemReorderModel.set('id','1');
//-------------^----------- if this is hardcoded, why not set specify it in model..?
ItemReorderModel.save( {}, {
success : function() {
var response = ItemReorderModel.toJSON();
var InvoiceView = new invoiceView({el: $("#itemData")});
},
error : function(model, xhr, options) {
}
});
},
I also suggest initializing the model in the view's initialize method and caching it as it's property rather than initializing a new model on every click.
I'm writing Todo app with Backbone.js
You can see part of my code below.
Model:
var Todo = Backbone.Model.extend({
defaults : {
title: 'Task Title',
complete: false
},
initialize: function(){
this.on("change:complete", function () {
alert("foo");
});
}
});
View:
var AppView = Backbone.View.extend({
collection: todoCollection,
el: 'body',
events: {
'click #tasks li .complete-task' : 'toggleComplete'
}
toggleComplete: function (e) {
var modelCid = $(e.target).parent('li').attr('id');
if ( this.collection.get(modelCid)['complete'] ){
this.collection.get(modelCid)['complete'] = false;
} else {
this.collection.get(modelCid)['complete'] = true;
};
}
});
But something working wrong and change event in the model doesn't working. I can't understand where I have mistakes.
Help me, please.
10q.
As per the Backbone Documentation:
Set model.set(attributes, [options])
Set a hash of attributes (one or
many) on the model. If any of the attributes change the model's state,
a "change" event will be triggered on the model. Change events for
specific attributes are also triggered, and you can bind to those as
well, for example: change:title, and change:content. You may also pass
individual keys and values.
So you need to be using the set method on the model for these events to be fired. So you would need to use something like this:
this.collection.get(modelCid).set('complete',false);
I'm developing a web app using Backbonejs.
I have a use case where I have to pass the new position of div1 to a double click event handler of a Backbone view.
My code looks like
var MyView = Backbone.Views.extend({
events: {
'dblclick #div1' : 'div1ClickHandler' //here I want to pass new offset for #div1
}
});
div1ClickHandler: function()
{
......
}
var myView = new MyView({model: myModel,el : #div1});
You can do that: inside div you need to add a new field with name data-yourfieldName and from js call that:
yourFunctionName: function(e) {
e.preventDefault();
var email = $(e.currentTarget).data("yourfieldName");
}
Assuming that your view element is a child element of the jquery widget, the best thing is probably to grab the values you need in the click handler:
var MyView = Backbone.Views.extend({
events: {
'dblclick #div1' : 'div1ClickHandler'
}
});
div1ClickHandler: function()
{
var $this = $(this);
var $widget = $this.parents('.widget-selector:first');
$this.offset($widget.offset());
$this.height($widget.height());
$this.width($widget.width());
}
var myView = new MyView({model: myModel,el : #div1});
If the jquery widget is always the direct parent of your view element, you can replace parents('.widget-selector:first') with parent(); otherwise, you'll need to replace .widget-selector with a selector that will work for the jquery widget.
You can pass widget in view itself, then you will have full control over widget.
var MyView = Backbone.Views.extend({
initialize: function(options) {
this.widget = options.widget; // You will get widget here which you passed at the time of view creation
}
events: {
'dblclick #div1' : 'div1ClickHandler' //here I want to pass new offset for #div1
}
});
div1ClickHandler: function() {
// Query to fetch new position and dimensions using widget
// update the respective element
}
var myView = new MyView({model: myModel, el: $('#div1'), widget: widgetInstance});
I have large collection of json objects which I retrieve through a search function, though depends on the search string, the output can go up to more than thousand of arrays which I populate into a list. Within mobile environment this become a hassle and memory consuming once I add touchmove, touchstart and touchend to each object. I found solution to this that there's a minimal way of showing object using backbone.js and with trigger such as button this could become robust. though I don't know how to go foward with it. This is working example without the button. And how I shoud do this?
<script>
//model - define value objects.
var Client = Backbone.Model.extend({
defaults: {
name: 'cole',
age: '12'
}
});
//collection - load json
var ClientCollection = Backbone.Collection.extend({
defaults: {
model: Client
},
model: Client,
url: './json/test.json',
//override parse due to json format. point to "items"
parse: function (response, xhr) {
return response.items;
}
});
//view. init collection. listen for data to be loaded. render.
var ClientView = Backbone.View.extend({
initialize: function () {
this.collection = new ClientCollection();
this.collection.bind("reset", this.render, this);
this.collection.fetch();
},
render: function () {
//append to html here ...
//alert(this.collection.at(0).get("name"));
//alert(this.collection.length)
for (var i = 0; i < this.collection.length; i++) {
$('#append-el').append('<li>' + this.collection.at([i]).get("name") + '; ' + this.collection.at([i]).get("age") + '</li>')
}
}
});
var clientView = new ClientView();
</script>
<div id = "append-el"></div>
Add an event listener to your view pointing to your button with the events hash, something like this
,events {
"click #buttonID" : "fillCollection"// <- this is a method name
}
and then create this method and trigger a collection.fetch, like this
,fillCollection: function(){
this.collection.fetch();
}
If i understood you well then this should work:
var ClientView = Backbone.View.extend({
el: '#append-el',
events: {
'click button': 'onButtonClick'
},
initialize: function() {
_.bindAll(this);
this.collection = new ClientCollection();
this.collection.bind("reset", this.renderClients);
this.render();
},
render: function() {
//append to html here ...
this.$el.append('<button type="button">Fetch clients</button><ul class="clients"></ul>');
},
renderClients: function() {
var $ul = this.$('ul.clients').empty();
this.collection.each(function(client) {
$ul.append('<li>' + client.get("name") + '; ' + client.get("age") + '</li>');
});
},
onButtonClick: function(e) {
this.collection.fetch();
}
});
I would suggest not to fetch thousands of items at once. Limit it to 100 max 200 hundred. Then I would start listening to scrolling on the list a fetch the rest of the items on as needed basis (you can automatically load them once the user approaches the end of the scrolled area or just place a "Load more" button at the bottom).
There are several paginator plugins for Backbone or you can simply limit the number of rendered element within the render() function.