We Keep Coding

RequireJS modules are undefined in Backbone view

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

Possible to hide some parameters in URL with Angular UI Router?

I want to pass two values to new ui-view via params:
item id
list of objects
However, I'd like the new view to show only the id in the browser URL and not the stringified array of objects:
http://www.myapp.com/#/my-view/4
INSTEAD OF
http://www.myapp.com/#/my-view/4?flskdjalfjaewoijoijasdlfkjösldakjföliwejöorijo
Is it possible to either a) pass the array of objects hidden to the ui-view or b) pass both but hide the other from the browser URL?
I found something about the squash parameter, but couldn't get it to do what I'm trying.
Here's my view:
$stateProvider
.state('show', {
url: "/show/{itemId}?{itemList}",
views: {
'mainView': {
templateUrl: 'views/itemView.html',
controller: 'showController',
params: {
itemList: {
value: null,
squash: true
},
itemId: -1
}
}
}
How can I hide the list of objects from the URL, without hiding the id?

You are on the right path. To hide params you have to define them in params as you do, without squash.
Your example should look like:
$stateProvider
.state('show', {
url: "/show?itemId",
views: {
'mainView': {
templateUrl: 'views/itemView.html',
controller: 'showController'
// params do not work here! They need to be attached below ...
// $stateProvider.state('show', {url:'/show/:url_param',views:{}, params: {}})
}
},
resolve: {},
params: {
itemList: {
value: null
}
}
})
See example: http://plnkr.co/edit/wEjwCVWMKTyuSdyLr0og?p=preview

It's also possible doing that
SomeController:
$state.go(someState, {
'itemId' : item._id,
'itemName' : item.title
});
SomeRoute
function someRoute($stateProvider) {
$stateProvider
.state('someState', {
url : '/:itemName',
params : {
'itemId' : null //hides itemId param
}
});
}
Output: .../itemnumber1

Sencha touch reset store start param

I have a store which is attached to a List. The list also uses the ListPaging plugin to enable pagination. After I call the load method (or event) of the store, the store loads the data into the list, sending requests to the following url -
http://localhost/mysite/nodelist.php?_dc=1359309895493
&tids=1%2C4%2C2%2C5%2C67&page=1&start=0&limit=10
After scrolling down the list and pressing the Load More... (which is appended to the list by the plugin), the store sends another request to the same url but with different parameters, enabling pagination -
http://localhost/mysite/nodelist.php?_dc=1359310357419
&tids=1%2C4%2C2%2C5%2C67&page=2&start=10&limit=10
Now I want to reset the value of the start and page parameter of the store. I tried to reset it by using the setExtraParam method on the proxy, but if I do that, then the control doesn't maintain the pagination - meaning that it doesn't automatically changes the page and start parameters when I press Load More....
So How do I do it?
Here is the sample code for my store -
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.reader.Json',
'Ext.data.proxy.Ajax'
],
config: {
autoLoad: false,
model: 'MyApp.model.MyModel',
serverUrl: null,
pageSize: 2,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
url: null,
reader: {
type: 'json'
}
},
listeners: {
beforeload: function () {
console.log('Before load');
},
load: function (store) {
// console.log('load');
}
}
}
});
and this is the list view -
list = {
xtype: 'list',
cls: 'myList',
flex: 12,
itemTpl: '{title}',
store: 'MyStore',
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false
}
],
listeners: {
select: {
scope: this,
fn: this.onSelect
},
swipe: {
scope: this,
element: 'element',
fn: this.onListSwipe
}
}
};

From looking at the source, perhaps you are looking for the currentPage config of the store?
When you load more recording using the ListPaging plugin, all it does is call nextPage in store which then calls loadPage using the currentPage config. If you reset the currentPage config back to 1 on your store, it will just assume the start is back to 0 and the page of course is 1.

Backbone router navigate to .../#/<route> without triggering router event. How to?

Don't know how to force backbone correctly navigate to routes like this:
page/#/channel/name
instead of
page#channel/name
or
page#/channel/name
My router works with one main model and observes its states, so the router should be able to change URL without triggering its events in this case.
I tried to do like this:
router.navigate("#/channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });
but in this case "trigger: false" didn't work, so I got undesirable call of router event.
Backbone.history root is set to "/", and I'm currently not using pushState.
See code example below:
var Router = Backbone.Router.extend({
routes: {
"": "index",
"index": "index",
"channel/:channelName": "changeChannel"
},
initialize: function (options) {
var router = this;
if (options.model) {
router.model = options.model;
} else {
//TODO: throw error
return;
}
//update url in cases of model channelSelection changes
router.model.on("stateChangeAccepted", function (appState) {
switch (appState.mode) {
case "channel":
router.navigate("/channel/"
+ encodeURIComponent(appState.data.channelName), { trigger: false });
break;
}
});
},
index: function () {
var router = this;
router.model.trigger("stateChangeRequest", {
mode: "channel",
data: {
channelIndex: 0
}
});
},
changeChannel: function (channelName) {
var router = this;
router.model.trigger("stateChangeRequest", {
mode: "channel",
data: {
channelName: decodeURIComponent(channelName)
}
});
}
});

Your router.navigate call does not match the route you defined:
routes: {
"": "index",
"index": "index",
"channel/:channelName": "changeChannel"
},
This means that the URL for a channel should be http://host.com/#channel/someChannel. However, your router.navigate calls are either router.navigate('#/channel...) or router.navigate('/channel...). It should be:
router.navigate("channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });
If, however, you want to use routes like http://host.com/#/channel/someChannel, then your route should be:
routes: {
"": "index",
"index": "index",
"/channel/:channelName": "changeChannel"
},
and your navigate call should be:
router.navigate("/channel/" + encodeURIComponent(appState.data.channelName), { trigger: false });

ExtJS 4 TreePanel autoload

I have an Ext.tree.Panel which is has a TreeStore. This tree is in a tab. The problem is that when my application loads all of the trees used in the application load their data, even though the store is on autoLoad: false.
How could I prevent autoloading on the tree?
Ext.define('...', {
extend: 'Ext.container.Container',
alias: 'widget.listcontainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
html: "...",
border: 0
}, {
xtype: '...',
flex: 1,
bodyPadding: 5,
margin: '9 0 0 0'
}]
});
Ext.define('...', {
extend: 'Ext.data.TreeStore',
model: '...',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
api: {
read: 'some url'
}
}
});
Ext.define('...', {
extend: 'Ext.tree.Panel',
alias: 'widget....',
id: '...',
title: '...',
height: 400,
collapsible: true,
useArrows: true,
rootVisible: false,
multiSelect: true,
singleExpand: true,
autoScroll: true,
store: '...',
columns: [...]
});
P.S. I've found out if I change rootVisible to true on the tree this problem doesn't happen, but then it shows to root node(which I don't want).

I hit the same problem, and to avoid an implicit request, I specified a root inline in the TreeStore's configuration, like:
Ext.create('Ext.data.TreeStore', {
model: '...',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
api: {
read : 'some url'
}
folderSort: true,
rootVisible: false,
root: {expanded: true, text: "", "data": []} // <- Inline root
});
After an explicit .load the inline root is overwritten.

If root is invisible then AJAX tree will automatically load first level of hierarchy (as you already proved by yourself).
I think the best way is to make root visible or create tree after some actions. I wrote code that prevent AJAX request that loads data:
var preventTreeLoad = true;
store.on('beforeexpand', function(node) {
if (node == this.getRootNode() && preventTreeLoad) {
Ext.Ajax.abort(this.proxy.activeRequest);
delete this.proxy.activeRequest;
}
}, store);
var b = Ext.create('Ext.Button', {
text: 'Click me',
renderTo: 'btn',
});
b.on('click', function() {
preventTreeLoad = false;
this.load();
}, store);
But I'm not recommended to use this approach. For example, if javascript wasn't so fast - Ajax request may be send (response will not be read but server will execute operation).

You can put a dummy proxy in place when defining the tree, then set the real proxy when you want to begin using the tree/store. For example:
var store = Ext.define('Ext.data.TreeStore', {
...
// dummy proxy to avoid autoLoad on tree store construction
proxy: {
type: 'ajax',
url: ''
},
...
);
Then, when you want to use it for the first time,
store.setProxy({
type: 'ajax',
url: 'http://some/real/url',
...
});
store.load();

You can solve it with a small override:
Ext.override(Ext.tree.View,
{
setRootNode: function(node)
{
var me = this;
me.store.setNode(node);
me.node = node;
if (!me.rootVisible && me.store.autoLoad)
{
node.expand();
}
}
});
afterlayout you need a load()

Adding to what XenoN said (though many years later when I hit the same issue)
If the expanded property is set to true in the store definition, it will auto load even if autoLoad is set to false. this is unique to a TreeStore.
However, if we do want the store to load and expand we need to
Set expanded = true sometimes in code after creation (when we want) this also fires the loading of the previously created store.
setting store.setRoot({expanded:true}); within the consumer of the store which is Ext.tree.Panel.
This will load the store when you want it to load it.
seems like after that, store.load() is redundant since the expanded = true makes the store's proxy to load up and go to the server. weird, I know.

Simplest way is setting Store's root property
Ext.create('Ext.data.TreeStore', {
....
autoLoad:false,
root: {
expanded: false
}
});

Try with children and autoLoad : false :
root: {
children : []
}