Develop Reference

Affecting other views in Marionette

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();
});

jquery mobile - pageinit event no triggered when using mobile.changePage

I have the following code for handling on click event of a button:
$(document).on("click", '.submit_review_button', function(event, ui) {
var place = $.data(this, "object");
var ttext = $("#review_text").val();
var review = new Object();
review.business_place_id = place._id;
review.review = ttext;
review.user_id = user._id;
// var review = {business_place_id:place.id, review: ttext, user_id: user.id}
$.ajax({
url: site_url + '/reviews/',
type:'POST',
data: review,
success: function(data) {
$.mobile.changePage("show_reviews_page", {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
// initShowReviewsPage();
},
error:function(data) {
alert(1);
}
});
});
I also have this code in document-ready:
$("#show_reviews_page").on('pageinit', function() {
initShowReviewsPage();
});
I know that the pageInit binding works, because if I go to #show_reviews_page using it works.
But when clicking on the .submit_review_button button, the on click event fires, the page changes but the init doent fire and the page is not valid.
Any idea why it doesnt work?

"pageinit" event is fired only once when the page loads in the DOM for the first time.
If you want fire a function everytime you go to a page, use "pageshow" or "pagebeforeshow" events.

Javascript MVC Controller and Click Events

I'm having a problem with the click events not working using a Javascript MVC Controller.
TEST.Assignments.AssignmentsController = function (element) {
var elements = {
activeAssignmentsPanel: $('#lpn-activeAssignments_Cont'),
assignmentViewLink: $("#lpn-activeAssignments_Cont table tr th a")
};
var _this = this;
var model = new TEST.Assignments.AssignmentModel();
this.buildAssignmentsList = function () {
var assignments = model.getActiveAssignmentsList({
assignmentMode: "active",
mock: true,
success: function (data) {
dust.render("ActiveAssignmentsPanel", data, function(err, out) {
elements.activeAssignmentsPanel.append(out);
});
}
});
};
this.getAssignmentDetails = function(assignmentId) {
console.log(assignmentId);
};
//bind all events
elements.assignmentViewLink.click(function (e) {
console.log("blah");
console.log($(this).data("assignmentKey"));
});
};//end assignments controller
$(function () {
var assignmentsController = new TEST.Assignments.AssignmentsController();
assignmentsController.buildAssignmentsList();
});
If you look at the //bind events, I have a click function there that should be working. But it is not. The constructor is being called and the elements are traced out correctly. Any idea why the click event won't work?

I assume the assignmentViewLink elements are created and appended in the success callback. If so, it looks like a sequence problem. When you bind the click event, the assignmentViewLink elements have not been created yet, and hence, the click eventhandler isn't attached.
//bind all events
// assignmentViewLink is empty []
elements.assignmentViewLink.click(function (e) {
console.log("blah");
console.log($(this).data("assignmentKey"));
});
To verify this, move the elements.assignmentViewLink(...) into the success callback.

Removing an unbind on a button in jquery?

function getData(url) {
$.getJSON(url, function(result) {
$('#formNav ul').append('<ul/>')
$.each(result, function() {
var list = $('#formNav li'),
listItem = $('<li/>'),
html = listItem.append($('<h5/>').text(this.name));
$.each(this.items, function() {
listItem.append($('<a />').attr('href', this.id).text(this.name))
});
list.append(html)
});
});
};
$(function(){
var Menu = {
$menu: $('.config-nav #formNav'),
$trades : $(".config-nav select#tradesmanList"),
$skills : $(".config-nav select#jobList"),
init: function(){
var $menu = Menu.$menu;
// Set menu up
$menu.children("li").addClass('closed');
$menu.find(".js-reveal").hide();
Menu.$skills.attr("disabled", "disabled");
Menu.$trades.on("change", function($skills){
Menu.$skills.removeAttr("disabled");
});
// bind to click on the item...
$menu.on("click", "h4", this.toggle);
},
toggle: function() {
// Toggle the hide show of the drill down menu
var $this = $(this),
$category = $this.parent();
console.log($this.parent().index());
var data = getData("test.json");
$category.addClass("loading").toggleClass("open");
$this.next(".reveal").delay(100).toggle(0, function(){
$category.Data;
$category.removeClass("loading");
});
}
};
Menu.init();
});
I have a function that returns json data , i then call this function in the Menu function to display the data however every time i click the button the data just keeps being generated instead i want it to display the data and then once it is clicked again hide the data? if anyone has any advice that would be great.
Thanks.

When ever you call the toggle function You seem to get the data using
var data = getData("test.json"); and then use it to populate the list..
Why don't you move the getData method to outside the toggle function and instead move it to to init function .. Look's like it should be fine then..

BindAsEventListener not returning Observe element in Prototype

var Generic_Large_Blue = new Element('div', { 'id': 'divZoltarSubmit_', 'class': 'Generic_Large_Blue Blue_' + placeholder });
var Generic_Large_Blue_Left = new Element('div', { 'class': 'Generic_Large_Blue_Left' });
var Generic_Large_Blue_Middle = new Element('div', { 'class': 'Generic_Large_Blue_Middle' });
var Generic_Large_Blue_Span = new Element('span').update("Submit");
var Generic_Large_Blue_Right = new Element('div', { 'class': 'Generic_Large_Blue_Right' });
//event on submit Click
Event.observe(Generic_Large_Blue, 'click', function(event) {
moZoltarCurrent.evt_ZoltarOnSubmit.bindAsEventListener(this,Item_TextArea, PriceInBox,event);
});
//this function is called when the submit button is clicked
evt_ZoltarOnSubmit: function(e) {
var sourceElement = Event.element(e);
var args = $A(arguments);
}
I have Click event on Generic_Large_Blue but Source Element Returned as Generic_Large_Blue_Left,Generic_Large_Blue_Middle, Generic_Large_Blue_Right.
Depeding on Click postion Its not returning Observe Element
Please help me out

Look closely at the example for bindAsEventListener on its documentation page. bindAsEventListener returns function, doesn't call function. Here is good code:
Event.observe(Generic_Large_Blue, 'click', moZoltarCurrent.evt_ZoltarOnSubmit.bindAsEventListener(this, Item_TextArea, PriceInBox));
PS: Next time check if your code is displayed correctly (you didn't specify what blocks are the code, so formatting fell apart).