I am trying to set up a service to perform json requests to a remote server.
I am using this code inside my services.coffee script :
HttpService = () ->
initialize: ->
__Model.List.destroyAll()
__Model.Item.destroyAll()
$$.get 'http://localhost:3000/lists.json', null, ((response) ->
lists = response.lists
items = response.items
$$.each lists, (i, list) ->
__Model.List.create list
$$.each items, (i, item) ->
__Model.Item.create item
), 'json'
createList: (list) ->
$$.post 'http://localhost:3000/lists.json', list, ((response) ->
), 'json'
http = new HttpService
http.initialize()
The initialize methods works fine.
What I would like is to be able to access the variable http from anywhere in my project.
However, I cannot access the function outside this file.
How can I define it globally?
UPDATE
Here is the file generated by CoffeeScript
// Generated by CoffeeScript 1.6.3
(function() {
var HttpService, http;
HttpService = function() {
return {
initialize: function() {
__Model.List.destroyAll();
__Model.Item.destroyAll();
return $$.get('http://localhost:3000/lists.json', null, (function(response) {
var items, lists;
lists = response.lists;
items = response.items;
$$.each(lists, function(i, list) {
return __Model.List.create(list);
});
return $$.each(items, function(i, item) {
return __Model.Item.create(item);
});
}), 'json');
},
createList: function(list) {
return $$.post('http://localhost:3000/lists.json', list, (function(response) {}), 'json');
}
};
};
http = new HttpService;
http.initialize();
}).call(this);
That is because coffeescript wraps the code in a top-level function safety wrapper.
In a browser, you can make it global by doing:
window.http = http
or tell coffeescript to not do the wrapper by compiling with -b:
coffee -c -b services.coffee
In general, global variables aren't a very good idea and you may want to consider using a module system like require.js to organize and access your code (including code in different files).
This will make the variable global in the context of the browser:
window.http = http
Related
Can someone tell me whats the best solution to use jsonObjects in ng repeat?
My code is as follows:
My PHP response is this:
die(json_encode(array('sts'=>'success', 'title'=>'*****', 'msg'=>'*******', 'data'=>$result)));
My angular.js the service is like this:
LeadApp.service('LeadsService', function ($http) {
var AllLeads = {
async: function() {
var promise = $http({
url: '../app/ServerData.php',
method: "POST",
params: { req_id: 'leads' }
}).then(function (response) {
return response.data;
});
return promise;
}
};
return AllLeads;
});
Then in my controller i call the service and set a lead var to use in my view with ng repeat: My Data is being loaded i assured already. I attached a pic of the console log from below. But somehow the ng repeat just wont work like expected... What am i doing wrong? There is no error!
....
LeadsService.async().then(function (d) {
this.leads = d.data;
console.log(this.leads);
this.list_all = this.leads;
Here is the main ng repeat part in the view (custom ng repeat with "dir-paginate"):
...
<div class="widget-content leads_list" ng-controller="leadsController as leads">
<tr dir-paginate="lead in leads.list_all | orderBy:sortKey:reverse | filter:search | itemsPerPage:15" pagination-id="leads.list_all">
<td scope="row">{{lead.id}}</td>
...
You need to bind the this context outside then method.
Since you are using ng-controller="leadsController as leads", it would be wise to bind to the variable leads.
var leads = this;
LeadsService.async().then(function (d) {
leads.list_all = d.data;
console.log(leads.list_all);
});
The this context inside the then method is not the same as the this context outside the then method. Also binding to the same name that you use in your template helps to avoid confusion.
this is not the controller in that callback function context. So you need to assign this to a variable in the controller.
var ctrl = this;
LeadsService.async().then(function (d) {
ctrl.leads = d.data;
console.log(ctrl.leads);
I'm trying to implement nested Collections exactly like the example I found here: https://stackoverflow.com/a/17453870/295133
The only difference being is that I'm trying to store the data locally using the localStorage plugin.
Here, my Lists would be the Hotels in the example above:
var app = app || {};
(function (){
'use strict';
// List Collection - list of words
//---------------------
var listCollection = Backbone.Collection.extend({
//referebce to this collection's model
model: app.ListModel,
localStorage: new Backbone.LocalStorage('translate-lists')
});
app.listCollection = new listCollection();
})();
(function (){
'use strict';
app.ListModel = Backbone.Model.extend({
initialize: function() {
// because initialize is called after parse
_.defaults(this, {
words: new app.wordCollection
});
},
parse: function(response) {
if (_.has(response, "words")) {
this.words = new app.wordCollection(response.words, {
parse: true
});
delete response.words;
}
return response;
}
});
})();
What the localStorage does is stores the ListModels, but if I add anything to the words collection it soon disappears after I refresh.
Any ideas how I should be saving the entire nested collection?
So got this working and it came down to something in parse but also if you want to ensure you just get the attributes out of your nested collection you should override the toJSON otherwise you get the full collection in what this returns.
Backbone.Model.prototype.toJSON = function() {
var json = _.clone(this.attributes);
for (var attr in json) {
if ((json[attr] instanceof Backbone.Model) || (json[attr] instanceof Backbone.Collection)) {
json[attr] = json[attr].toJSON();
}
}
return json;
};
The main thing that was breaking is in the parse. Is assigns words directly to the model,
this.words = new app.wordCollection(response.words, {
parse: true
});
but this means that it will not show up when toJSON is called as it is not in the attributes (it also means you can't access it via model.get)
so this should be changed to
initialize: function () {
// because initialize is called after parse
_.defaults(this.attributes, {
words: new app.WordCollection()
});
},
parse: function (response) {
if (_.has(response, "words")) {
this.attributes.words = new app.WordCollection(response.words, {
parse: true
});
delete response.words;
}
return response;
}
this way it is added to the attributes of the model on not directly on the model. If you look at this fiddle http://jsfiddle.net/leighking2/t2qcc7my/ and keep hitting run it will create a new model in the collection, save it in local storage then print the results to the console. each time you hit run you should see it grow by 1 (as it gets the previous results local storage) and contain the full information that you want.
I'm using breeze.js to get some serverdata on the client, this works fine. To create a more modular application i want to create a 'dataservice' to bundle the breeze query's in 1 module to be included in other modules as a dependency.
this is the module:
define(function () {
var serviceName = window.location.protocol + "//" + window.location.host + '/breeze/n0uk', // route to the Web Api controller
manager = new breeze.EntityManager(serviceName);
function getPoster(callsign) {
var query = breeze.EntityQuery.from('Posters').where("Callsign","==",callsign);
return manager.executeQuery(query);
};
return {
getPoster:getPoster
};
});
I've created a testmodule to test the function:
define(["common/dataService"],function(n0uk) {
alert("home/index geladen");
n0uk.getPoster("pe1l").then(function(data) {
alert(data.Name);
}
);
});
sadly there is no data returned. I'm a breeze and require newby ( and js experience is also not topnotch). Can someone direct me in the right direction?
In your test module you're executing alert(data.Name). The breeze query will return an object with an array property named results so you probably want to use something like this:
define(["common/dataService"],function(n0uk) {
alert("home/index geladen");
n0uk.getPoster("pe1l")
.then(function(data) {
alert(data.results.length.toString() + ' items returned');
})
.fail(function(reason) { alert(reason); });
});
Other things to try:
Use your browser's F12 tools (or visual studio) to set a breakpoint and inspect the query result.
Use fiddler's "inspectors" tab to confirm your api call is returning data:
For more info on what the executeQuery method returns, look here (scroll to "executeQuery"):
http://www.breezejs.com/sites/all/apidocs/classes/EntityManager.html
I am trying to initialize a Breeze manager inside a 'Web Worker'.
RequireJs, knockout, q, breeze are being imported inside the worker.
After a call to:EntityQuery.from('name').using(manager).execute(),
the following error appears:
Uncaught Error: Q is undefined. Are you missing Q.js? See https://github.com/kriskowal/q.
A live preview is uploaded here http://plnkr.co/edit/meXjKa?p=preview
(plunk supports downloading for easier debug).
EDIT -- relevant code
Worker.js
importScripts('knockout.js', 'q.js', 'breeze.js', 'require.js');
define('jquery', function () { return jQuery; });
define('knockout', ko);
define('q', Q); //Just trying to assign q since breeze requests Q as q
require(function () {
var self = this;
this.q = this.Q; //Just trying to assign q since breeze requests Q as q
breeze.NamingConvention.camelCase.setAsDefault();
var manager = new breeze.EntityManager("breeze/Breeze");
var EntityQuery = breeze.EntityQuery;
// Q or q here is defined (TESTED)
var test = function (name) {
return EntityQuery.from(name)
.using(manager).execute() // <-- Here q/Q breaks (I think on execute)
};
var primeData = function () {
return test('Languages')
.then(test('Lala'))
.then(test('Lala2'))
};
primeData();
setTimeout(function () { postMessage("TestMan"); }, 500);
});
Worker will be initialized on main page as:
var myWorker = new Worker("worker.js");
Ok here it goes:
Create a new requireJs and edit the
isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document)
to
isBrowser = false
Create a new Jquery so it uses nothing related to window and generally anything that a WebWorker cannot access. Unfortunatelly i can't remember where i got this Custom JQueryJs but i have uploaded it here "https://dl.dropboxusercontent.com/u/48132252/jqueydemo.js".
Please if you find the author or the original change link and give credit.
My workerJs file looks like:
importScripts('Scripts/test.js', 'Scripts/jqueydemo.js', 'Scripts/q.js', 'Scripts/breeze.debug.js', 'Scripts/require2.js');
define('jquery', function () { return jQuery; });
require(
{
baseUrl: "..",
},
function () {
var manager = new breeze.EntityManager("breeze/Breeze");
var EntityQuery = breeze.EntityQuery;
var primeData = function () {
return EntityQuery.from(name)
.using(manager).execute() // Get my Data
.then(function (data) {
console.log("fetced!\n" + ((new Date()).getTime()));
var exportData = manager.exportEntities(); // Export my constructed entities
console.log("created!\n" + ((new Date()).getTime()));
var lala = JSON.stringify(exportData)
postMessage(lala); // Send them as a string to the main thread
})
};
primeData();
});
Finally on my mainJs i have something like:
this.testWorker = function () {
var myWorker = new Worker("worker.js"); // Init Worker
myWorker.onmessage = function (oEvent) { // On worker job finished
toastr.success('Worker finished and returned');
var lala = JSON.parse(oEvent.data); // Reverse string to JSON
manager.importEntities(lala); // Import the pre-Constructed Entities to breezeManager
toastr.success('Import done');
myWorker.terminate();
};
};
So we have managed to use breeze on a WebWorker enviroment to fetch and create all of our entities, pass our exported entities to our main breeze manager on the main thread(import).
I have tested this with 9 tables fully related to each other and about 4MB of raw data.
PROFIT: UI stays fully responsive all the time.
No more long execution script, application not responding or out of memory errors) at least for chrome
*As it makes sense breeze import entities is way more faster than the creation a full 4MB raw data plus the association process following for these entities.
By having all the heavy work done on the back, and only use import entities on the front, breeze allows you to handle large datasets 'like a breeze'.
I'm trying to make a single page application with dynamic content, using durandaljs. For example, if you change the language in your settings, then the UI gets updated. I'm using SignalR to load the objects from the server, and everything works fine apart from when I navigate. The first time I load the view, I'm getting the following error:
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: router is not defined;
Bindings value: compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}
but if I reload the page, then the view is displayed correctly.
Here is an example of the viewmodel:
define(function (require) {
var p = require('hubs/myhub'),
rep = require('repositories/myrepository');
var myViewModel = function(data, proxy, cookie) {
var self = this;
self.proxy = proxy;
self.cookie = cookie;
self.Labels = ko.observableArray([]);
try {
self.proxy
.invoke('Setup', self.cookie.Username, self.cookie.Language)
.done(function (res) {
if (res.Result) {
console.log(JSON.stringify(res.Object, null, 4));
self.Labels(res.Object.Labels);
} else {
console.log(res.Error);
}
});
} catch (e) {
console.log(e.message);
}
};
return {
activate: function () {
var cookie = JSON.parse($.cookie(rep.cookieName));
ko.applyBindings(myViewModel({}, p.proxy, cookie), document.getElementById('my_container'));
}
};
});
If I take off the applyBinding of the activate function, then there is no more issue within the navigation. Would there be proper way to do this?
I've modified the return statement for:
return {
myModel: new myViewModel ({ }, p.proxy, JSON.parse($.cookie(rep.cookieName))),
activate: function () {
this.myModel.init();
}
};
and wrapped the signalr call inside an init() function. everything works great now.
That is exactly the right way! DUrandal calls the Ko.applybindings for YOU ;) Meaning Durandal does the binding!
Hot Towel SPA Durandal Knockout and Dynatree