js.
Right Now:
I have a graphView containing 3 tabs A, B, and C.
For each tab A, B or C, each has a view and a coffee.js. In each view, there's a button and in each corresponding coffee.js, each contains a triggerSelf function.
As following:
for A: in its view: loadButtonA ; in its aCoffee.js: triggerA function
for B: in its view: loadButtonB ; in its bCoffee.js: triggerB function
for C: in its view: loadButtonC ; in its cCoffee.js: triggerC function
What I want to achieve:
When I click any button, I want to trigger the other 2 functions in other 2 files.
For example: When I click loadButtonA, I call triggerA, triggerB in bcoffee.js, and triggerC in cCoffee.js
Could anyone help please?
Thank you.
I would do it through the controller which (presumably) they all share.
App.ViewA = Ember.View.extend({
actions: {
triggerA: function () {
this.trigger();
}
},
trigger: function () {
/* Handle specific here */
this.get("controller").send("triggerAny", this);
}
});
App.GraphController = Ember.Controller.extend({
graphViews: [], // cache all subview instances here
actions: {
triggerAny: function (sender) {
this.get("graphViews").forEach(function (gv) {
if (gv === sender) {
return;
}
gv.trigger();
});
}
}
});
Related
I'm creting a jquery context menu, using https://swisnl.github.io/jQuery-contextMenu/ .
I've sucessfully done the creation part of the submenu.
I had to use build, in order to have some data that is only available on runtime.
This data appears on a submenu, and I need to have a title on each of those submenu items, as well as click funtion on each of them.
I cant seem to make it work, both the title and the function on those submenu items.
Here is my code:
$.contextMenu({
selector: '.gridRelatorioCursorMorada',
build: function ($triggerElement, e) {
var coords = $triggerElement[0].attributes['data-coord'].nodeValue;
var coordsArray = coords.split(',');
return {
callback: function (key) {
if (key === 'get') {
getdata();
}
},
items: {
get: {
name: "Get data"
},
see: {
name: "See data",
items: {
normal: { name: coords },
graus: { name: dd2dms(coordsArray[0], coordsArray[1]) },
siresp: { name: decimalToSIRESPCoordinates(coordsArray[0], coordsArray[1]) }
}
}
}
};
}
});
Since the events part of contextMenu doesnt work with build, I dont know what else to do.
I've also added the following code:
$(document).on('contextmenu', function () {
$('.context-menu-submenu > ul > li').attr('title', 'tituro');
});
But it also doesnt work.
My mistake.
Event does work on build.
This got me to get the title on each of the submenu items.
The click function I got it working with the callback function.
I've got a collection view with two filter methods, and a render method which takes a parameter. The problem I'm stuck with is that when rendering the view for the first time it returns me an error. Here's my collection:
var ResumeCollection = Backbone.Collection.extend({
url: 'http://localhost:3000',
filterActive: function () {
var active = this.where({interviewed: false});
return new ResumeCollection(active);
},
filterInterviewed: function () {
var interviewed = this.where({interviewed: true});
return new ResumeCollection(interviewed);
}
});
And my view:
var ResumeList = Backbone.View.extend({
events { // hash array of filter events },
initialize: function () {
this.collection.fetch();
},
render: function (filtered) {
var self = this;
var data;
if (!filtered) {
data = this.collection.toArray();
} else {
data = filtered.toArray();
}
_.each(data, function (cv) {
self.$el.append((new ResumeView({model: cv})).render().$el);
});
return this;
},
showActive: function (ev) {
var filtered = this.collection.filterActive();
this.render(filtered);
},
showInterviewed: function (ev) {
var filtered = this.collection.filterInterviewed();
this.render(filtered);
},
showAll: function (ev) {
this.render(this.collection);
}
});
This view gets rendered for the first time in my router by passing a collection:
var AppRouter = Backbone.Router.extend({
routes: {
'': 'home'
},
initialize: function () {
this.layout = new LayoutView();
}
home: function () {
this.layout.render(new ResumeList({
collection: new ResumeCollection()
}));
}
});
And this is the layout view within which all the other views are rendered:
var LayoutView = Backbone.View.extend({
el: $('#outlet'),
render: function (view) {
if (this.child && this.child !== view) {
this.child.undelegateEvents();
}
this.child = view;
this.child.setElement(this.$el).render();
return this;
}
});
When I just refresh my page, I get filtered.toArray is not a function error and nothing is rendered respectively. After inspecting everything in the debugger, I found out that when the view gets rendered for the first time, the filtered attribute receives an empty collection, assigns it to data variable, which becomes an empty array and goes to the body of render function, becoming undefined after that. The mysteries go here: whenever I click items, that are bound to my show* events, they act exactly as expected and render either models where interviewed === false, or true or the whole collection. This looks kinda magic to me and I haven't got the faintest idea what can I do with that.
ADDED: GitHub repo with this project
Your home function on the AppRouter has a typo. You have an extra semi-colon.
home: function () {
this.layout.render(new ResumeList({
collection: new ResumeCollection();
}));
}
Should be
home: function () {
this.layout.render(new ResumeList({
collection: new ResumeCollection()
}));
}
I needed to remove it to get the JSFiddle working: https://jsfiddle.net/4gyne5ev/1/
I'd recommend adding some kind of linting tool into your IDE or Build process (http://eslint.org/)
You need to add home url content to your db.json file like this
"" : [
{
'somthing': 'somthing'
}
]
After a piece of advice from my mentor I realized that the core of the problem was in asynchronous origin of fetch method -- as I passed this.collection.fetch in my initialize function, it executed after my render method, not before it, so my render method had just nothing to render when the view was called for the first time. So, this fix worked:
var ResumeList = Backbone.View.extend({
initialize: function (options) {
this.collection = options.collection();
// removed .fetch() method from here
},
render: function (filtered) {
var self = this;
var data;
// and added it here:
this.collection.fetch({
success: function (collection) {
if (!filtered) {
data = collection.toArray();
} else {
data = filtered.toArray();
}
self.$el.html(self.template(collection.toJSON()));
_.each(data, function (cv) {
self.$el.append((new ResumeView({model: cv})).render().$el);
})
}
});
}
});
And this worked perfectly and exactly as I needed.
I want to display the records, but when I test it to display the data on console use record.get(''), it not work . even I tap the static code console.log('some thing'). It also cant display on my console.
The code in my controller:
it near the //-------here it is
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
config: {
refs: {
myTabPanel: '.makemoney #tabfirst',
},
control: {
myTabPanel: {
activate: 'onActivateTabPanel',
activeitemchange: 'onActiveItemChangeTabPanel'
}
}
},
launch: function(){
var products = Ext.getStore('productstore');
products.filterBy(function(record, id){
return record.get('loanname') === 'xixi22';
});
},
onActivateTabPanel: function(newActiveItem, viewport, oldActiveItem, eOpts) {
//test
console.log('hello the activatetabpanel is fire!');
//end test success
var tabs = Ext.getStore('loanliststore');
tabs.each(function(record) {
console.log('hello come on');//---------------------here it is
newActiveItem.add({
title: record.get('loanname')
});
console.log('');
});
},
onActiveItemChangeTabPanel: function(cmp, value, oldValue, eOpts) {
console.log('hello this is the activechangepanel is fire!');
var products = value.getStore();
products.clearFilter(true);
products.filterBy(function(record, id) {
return record.get('loanname') === value.getTitle();
});
}
});
Check by tabs.getCount() if it is greater then 0 then it should work. If not means there is no data populated in your store.
I am new to Backbone and have an issue from almous beginning wondering how to overcome issue with unexpected behavior of a main view.
1. I launch page and it looks okey.
2. I click button that lead me to different view and shows me it well.
3. I click "back" button and I see a blank page, but in DOM I can find some elements from previous view, but not visible.
Here is a piece of my router code (I hope this pieces will be enough):
home: function () {
if (!app.leftMenuView) {
app.leftMenuView = new app.views.LeftMenuView({
el: $("#left_menu")
});
} else {
app.leftMenuView.delegateEvents();
}
if (!app.homeView) {
app.homeView = new app.views.HomeView({
el: $("#main_container")
});
} else {
app.homeView.delegateEvents();
}
if (!app.topMenuView) {
app.topMenuView = new app.views.topMenuView({
el: $("#top_menu")
});
} else {
app.topMenuView.delegateEvents();
}
},
search: function () {
app.searchView = new app.views.SearchView({
el: $("body")
});
},
A piece of main html file:
<body>
<div id="search-div"></div>
...
</body>
HomeView:
app.views.HomeView = Backbone.View.extend({
initialize: function () {
this.render()
},
render: function () {
var self = this;
$.get('/template/home.html', function (data) {
self.$el.html(_.template(data)({}));
});
return this;
},
});
A SearchView:
app.views.SearchView = Backbone.View.extend({
events: {
"click #left-arrow-icon": "toMainPage"
},
initialize: function () {
this.render();
},
render: function () {
var self = this;
$.get('/template/searchView.html', function (data) {
self.$el.html(_.template(data));
});
return this;
},
toMainPage: function () {
Backbone.history.history.back();
},
});
In the example provided, the search view, if rendered, will destroy the main html file content since the element provided is directly the body. In any case, if you go to search view, your home page will have been destroyed or will not be able to render anymore.
I would suggest an improved layout management :
separate elements per views
show/hide of root elements based on routes
I'm slowly trying to slug my way through learning OOJS by building an accordion toggle and I'm having a hard time.
EDIT: Slowly getting there. I've got the toggle functioning how I want to. Unfortunately I'm calling the add / remove class incorrectly(?).
I'm currently calling it like:
accordion.ELEMENTS.TRIGGER.click(function() {
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
And I would rather call it via the EVENTS.OPEN & EVENTS.CLOSE or even throw both of this into the EVENTS.BIND and have BIND sort out whether or not if it is open or not :
Here's a JSFiddle, I'm trying to bind the EVENTS.OPEN and EVENTS.CLOSE instead of trying to find the parents.
var accordion = {
ELEMENTS: {
HOME: $('.js-accordion-toggle'),
TRIGGER: $('.js-accordion-trigger'),
PANEL: $('.js-accordion-panel')
},
CLASSES: {
OPEN: 'open'
},
EVENTS: {
OPEN: function() {
if (ELEMENTS.HOME.hasClass(accordion.CLASSES.OPEN)) {
console.log(this + "open");
ELEMENTS.HOME.addClass(accordion.CLASSES.OPEN);
}
else {
console.log("this should close");
this.close();
}
},
CLOSE: function() {
accordion.ELEMENTS.HOME.removeClass(accordion.CLASSES.OPEN);
},
//BIND: function() {
// accordion.ELEMENTS.HOME.each(function() {
// accordion.EVENTS.OPEN();
// });
//}
},
fn: {
attachEvents: function() {
accordion.ELEMENTS.TRIGGER.click(function() {
console.log(this);
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
}
},
init: function() {
accordion.fn.attachEvents();
}
}
accordion.init();
I managed to get your original fiddle to work by invoking accordion.init() after your object definition. I also had to replace your line 37 with accordion.ELEMENTS.PANEL.addClass(accordion.CLASSES.OPEN); to get rid of some undefined object error.
As for your new codes, you can simplify your codes by removing the if..else statement in line 19 and 22 with jQuery.toggleClass, to make it looks like:
$(this).closest(toggleHome).toggleClass(toggleClass);