I have my Rails and Backbone.js application deployed to a suburi. What is the best way to prepend all request with the suburi?
Example: application is deployed to www.example.com/app. I have a resource users and I'd like backbone to call www.example.com/app/users instead of the default www.example.com/users.
I'm setting a ROOT_URI variable on the server side and I'm going to use it in the backbone app. The simple way is to add it to all urls in models and collections, but it's tedious and error prone. What should I do? Override Backbone.sync?
you can pass URL on your Fetch call
Example
model.fetch({
url: yourServiceURL,
success: function (response, xhr)
{
//console.log("Successfully Fetched...");
},
error: function()
{
//console.log("Error Occurred...");
}
});
in this way you don't have to define url in your model and collections
EDIT
what i understand from your comment. you can do something like this
yourModel = Backbone.Model.extend({
url:function() {
return yourGlobalVarForRootURI+"/staticLogicalPathForEachModel";
},
parse: function (response) {
return response;
}
});
in this way you can give yourGlobalVarForRootURI variable in all of your models/collections and you can change this global variable so it will be changed in all models/collection. I hope it will solve your problem
Related
I have a Message model with a value and author properties. I can do this inside the Ember codes (controller, model, views, etc):
this.store.push('message', msgObj)
However, the following does not work at the Global scope, say putting that inside <script src="websocket_processor.js"> like:
msgObj = {value: 'Hello!', author: 'Jules'}
//I've tried the following but does not work
this.store.push('message', msgObj) //`this` doesn't point to ember
store.push('message', msgObj) //Console error: undefined store
App.Store.push('message', msgObj) //Uncaught TypeError: Object function () {if (!wasApplied) {...
I want this to be outside ember because I am using websocket-rails gem from which I use the following function
dispatcher.bind('add_message', function(data) { //add_message is just a method param from server
//Code where I need to use Ember to store say
this.store.push('message', data)
}
I'm stuck with this for hours now. Any help would be appreciated. Thanks!
You can use Application initializer to do the job and lookup for store after it has been registered so you can use it in external component.
Ember.onLoad('Ember.Application', function (Application) {
Application.initializer({
name: "websocket-rails",
after: "store",
initialize: function (container, application) {
var store = container.lookup('store:main');
// Now you can inject store to component outside of Ember
}
});
});
I'm working on an asp.mvc3 web api project. in this project I use TypeScript and Angular.js
and I need to access the business layer from TypeScript through the Web API. I called the Web API inside the constructor method in TypeScript using the
code given below.
constructor($scope, $http: any) {
$scope.VM = this;
$http.get("/API/PrivateAPI/Test/1").success((a) => { this.Tiles = a });
var bb = this.Tiles;
}
However, when trying to get the object list from the business layer, the Tiles array is empty. I debugged the code and found out the Web API is called after passing the last line of the constructor and does return results. I need to call that method inside the constructor and get object list to the Tiles array.
Does anyone know how to do so?
First of, I think you should do the following (notice .data) :
$http.get("/API/PrivateAPI/Test/1").success((response) => { this.Tiles = response.data });
Anyways, $http only supports async http requests. What you want can be done by a synchronous XHR request and that is considered bad UI experience, since the browser window freezes till the XHR request completes, and therefore $http doesn't support it (configuration docs).
What you can do is something like :
call another function from response e.g.
(response) => { this.Tiles = response.data; this.continueWithProcessing(); }
Or, Setup a variable to hide a preloader when the response comes back:
(response) => { this.Tiles = response.data; this.allDone=true; }
Where you have an ng-show on something like:
<div ng-show="!VM.allDone">Loading the data....</div>
Or both :)
Note: An async setting is supported in underlying browsers native XHR object and therefore in $.ajax which is the jquery ajax function : http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings. However it is a horrible UI experience + if you use it from angular you are responsible for scope.apply.
Ok. I have a url setup to log a user out. On the server, there is no html. The session on the server simply gets destroyed, and then the user is redirected to an address.
This works fine with plain html, but with Angular i am having issues. I've been routing all main routes using $routeProvider.when('/foo', {templateUrl: '/foo.html', controller: 'Ctrl'}) and that works fine for normal templated routes.. however, if there is no template it will not work.
So, how do i support the route /logout in the same fashion as above, when there is no html template?
A workaround is to use template instead of templateUrl. From the Angular docs:
template – {string=} – html template as a string that should be used
by ngView or ngInclude directives. this property takes precedence over
templateUrl.
This can be used as follows:
$routeProvider.when("/foo", {template: " ", controller: "Ctrl"});
Note: You must use " " instead of an empty string "" because Angular uses an if (template) check before firing the controller, and an empty string evaluates to false.
-- EDIT --
A better way to do it is to use the resolve map. See the Angular Docs:
resolve - {Object.=} - An optional map of
dependencies which should be injected into the controller.
This can be used like this:
$routeProvider.when('/foo', {resolve: {redirect: 'RedirectService'}});
Note: I've changed it from "Ctrl" to "RedirectService", because what you're describing in the question isn't really a "controller" in the Angular sense. It doesn't set up scope for a view. Instead, it's more like a service, which ends up redirecting.
I am writing the solution based on the already accepted answer and the github issue mentioned in it's comments.
The approach I am using is a resolve parameter in the $routeProvider. In my case I was trying to create a nice solution to logout in my application, when user goes to /logout.
Example code of $routeProvider:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
...
when('/logout', {
resolve: {
logout: ['logoutService', function (logoutService) {
logoutService();
}]
},
}).
...
}]);
In the resolve part you specify a service (factory) by name and later on you have to call it. Still it is the nicest solution around.
To make the example complete I present my logoutService:
angular.module('xxx').factory('logoutService', function ($location, Auth) {
return function () {
Auth.setUser(undefined);
$location.path('/');
}
});
Works great!
i'm looking around for javascript routing libraries and i come to Sammy, so i'm learning it.
All examples that i've seen so far show hot to proceed routing based from a domain as a base url, like www.mydomain.com/# and then all routes goes on
but i'm doing some trials within a nested dir within my localhost dir, say /wwwroot/play/sammy/ so my base url would be
http://localhost/~rockdeveloper/play/sammy/#
and then all routes must go on, like:
http://localhost/~rockdeveloper/play/sammy/#/products
http://localhost/~rockdeveloper/play/sammy/#/clients
http://localhost/~rockdeveloper/play/sammy/#/search
is there any way to set this base url so i can proceed to config sammy routes like this ?
get('#/products')
get('#/clients')
get('#/search')
by now i have to concatenate the main string to the route, and i wish it would be more smart than this...
baseurl='/~rockdeveloper/play/sammy/#/search';
get(baseurl + '#/products');
thanks.
Sammy is a frontend framework, you don't need to provide a baseurl, since all calls are made at clientside on the base of url, the rest of the path after the pound sign are there just for sammy use.
Ex:
http://localhost/~rockdeveloper/play/sammy/#/products
http://localhost/~rockdeveloper/play/sammy/#/products/iphone
http://localhost/~rockdeveloper/play/sammy/#/products/iphone/cases/all
Your base path IS
http://localhost/~rockdeveloper/play/sammy/
In all of them. The rest are just sammy routes, (think of them as GET params)
Also your routes must be defined in a way that can be called seamlessly from your anchors. Here is a portion of my routes file:
app = $.sammy('body', function() {
//define events
this.bind('addNew',function(e,data){
//data.name = data.name.split(' ').join('_');
for(x in mapa[data.element]){
if(mapa[data.element][x].name.toLowerCase() == data.name.toLowerCase()){
return alert('There is already an element with the same name');
break;
}
}
ap('Adding: '+data.element+' with the name: '+data.name);
mapa[data.element].push({name:data.name});
this.trigger('sections',{action:data.element});
});
// define routes
this.get('#/', function() {
$('#menuright').html('');
$('.customMenu').remove();
$('#holder').html('').attr({style:''});
});
this.get('#/someroute/:variable', function() {
/*
...
...
...
*/
});
this.before(function(){
if(typeof(app.historial)=='undefined'){
app.historial = [];
}
app.historial.unshift(this.path.split('#')[1]);
if(app.historial.length>2) app.historial.length = 2;
do_something();
});
});
And from your views you can just simply use something like:
<i class="icon-bookmark"></i> {{name}}
//le me here using mustache :{
I am a new to MVC an need a little help.
In my view I make an ajax post as below.
function PostCheckedPdf(e) {
var values = new Array();
$('input:checked').each(function () { values.push(this.value); });
$.post("/UnregisteredUserPreview/DownloadPdfInvoice",
{ checkedList: values });
}
This post the values of any checkboxes that are checked inside a third party Grid component (Telerik). The Action method receives the array fine and loops through each value rendering a pdf report and putting the report into a ZipStream which is attached to the Response. After the loop the zipstream is closed and I return View();
When the Action is invoked through the $.post it runs through the action method but nothing happens in the browser.
If I call the Action through an action link (with a couple of hard coded value instead of passing the checked boxes values) the zip file with all the pdfs is downloaded.
What am I doing wrong or how can I post the checked values with an ActionLink?
Thanks in Advance!
Toby.
The difference is that your ActionLink is emitting an <a> tag, which is performing a GET operation. The browser interprets the contents of the response and opens the PDF.
Your jQuery method is performing a POST, but does nothing with the response, and thus silently throws it away in the background.
You need to actually do something with the return contents, like write it out to another window.
var w = window.open('', '', 'width=800,height=600,resizeable,scrollbars');
$.post("/UnregisteredUserPreview/DownloadPdfInvoice",
{ checkedList: values },
function(content){
w.document.write(content);
w.document.close(); // needed for chrome and safari
});
You are making an Ajax call to the server there and client side code should receive the returned result which seems that you are not doing there. It should be something like below :
$.ajax({
type: 'POST'
url: '/UnregisteredUserPreview/DownloadPdfInvoice',
data: { checkedList: values },
success: function (r) {
alert(r.result);
}
});
And assume that your controller is like below :
public ActionResult DownloadPdfInvoice() {
//do you stuff here
return Json(new { result = "url_of_your_created_pdf_might_be_the_return_result_here"});
}
NOTE
If you are posting your data with anchor tag, it is better to
prevent the default action of this tag so that it won't do anything
else but the thing you're telling it to do. You can do that by adding the
following code at the end of your click event function :
$("#myLink").click(function(e) {
//do the logic here
//ajax call, etc.
e.preventDefault();
});
Have a look at the below blog post as well. It might widen your thoughts :
http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views