I have a problem with the "this" reference on Backbone with Coffeescript, this is a method which shows information of an artist:
show: (id) ->
self = #
if #collection
artist = #collection.get(id)
#renderArtist(artist)
else
artist = new DemoBackbone.Models.Artist({id: id})
artist.fetch
success: ->
self.renderArtist(artist)
renderArtist: (artist) ->
view = new DemoBackbone.Views.ArtistsShow(model: artist)
$('#content_artists').html(view.render().el)
This works perfectly, but I'm using the "self = #" statement so I can use the Class function "renderArtist", but is there a more "elegant" way to do this on "success: -> self.renderArtist(artist)", so I can avoid using the "self = #" line??
Something like
success: #->
#renderArtist(artist)
I'm not pretty sure but I think there should be a way to do this.
Thanks
This is exactly what the double-arrow function in CoffeeScript does. It will generate code like you have shown for you automatically so you don't have to write it yourself.
success: =>
#renderArtist(artist)
Related
I am trying to build a relatively simple web application following tutorials from the book ProAngular. The book examples work fine, but when I try and build my own app, I am getting stuck on a strange error. Here is part of my code:
$scope.dispositionsResource = $resource(dispositionUrl + ":id", { id: "#id" },
{ create: {method: "POST"}, save: {method: "PUT"}, delete: {method: "DELETE"}
});
. . .
$scope.updateDisposition = function (disposition) {
alert("DISPOSITION: "+disposition.name);
disposition.$save();
}
The Create and Delete functions work fine. The updateDisposition method is being called form an HTML form and the correct disposition value is being passed (based on the Alert). But the error I am getting is:
"Error: disposition.$save is not a function"
None of my example code separately defines a save function, the function should be part of the restful service ($resource). Shouldn't it?
Any pointers in the right direction would be greatly appreciated.
Ted
I did end up getting this working. Not totally sure why, but I renamed the Save function to 'Update' and associated it with the PUT functionality.
$scope.dispositionsResource = $resource(dispositionUrl+":id", { id: "#id" },
{ 'create': {method: "POST"}, 'update': {method: "PUT"}
});
$scope.updateDisposition = function (disposition) {
$scope.dispositionsResource.update(disposition);
$scope.editedDisposition = null;
}
calling update rather than save worked. Something seemed to be interfering with using the term 'save'. Like I said, not sure what . . . yet. One of those head-scratchers for me. Thanks to those who tried to assist!
I am learning angular myself, but the first problem I can see with your code is that it doesn't look like you are defining $resource correctly ( fair warning, Angular has a ton of caveats and you may simply be delving into one I am not aware of).
I believe a more straight forward way of doing what you are trying to do is first creating an angular factory for the $resource, like so:
angular.module('yourModuleName')
.factory('disposition', function($resource) {
return $resource('/whatever/url/youwant/:id', {
id: '#id'
})
});
And then from there, declare the factory as a dependency for your controller:
angular.module('yourModuleName')
.controller('yourControllerName', function($scope, disposition) {
$scope.submitForm = function($scope)
disposition.save($scope.nameOfYourModel);
});
One thing to keep in mind is that $resource has all of the methods that you declared by default. From the docs at https://docs.angularjs.org/api/ngResource/service/$resource these are what are available out of the box:
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
Personally, I prefer to use the $http service myself. Yes, it is quite a bit more verbose than using $resource but I feel that it is much easier to understand $http when starting with angular than the $resource service. To save yourself from a world of headaches in the future, I highly recommend becoming familiar with the concept of promises in Angular as many of its services make use of them.
Good luck.
I am new to Dojo, I am using QueryReadStore as the store for loading my TreeGrid, working fine. But the QueryReadStore appends some paramters to the url, parameters like parentId, count, sort etc., I have looked at this link http://dojotoolkit.org/reference-guide/1.7/dojox/data/QueryReadStore.html, but not able to understand.
Parameters are getting passed like this servlet/DataHandler?start=0&count=25
How to manipulate the parameters, like I want to set the value for parentId paramters so that I only get that particular row details.
In theory you wold have to create a new class by extending the "dojox.data.QueryReadStore", in the link you posted have an example for doing exactly what you want. See if you get it now(changed a bit):
dojo.require("dojox.data.QueryReadStore");
dojo.declare("custom.MyReadStore", dojox.data.QueryReadStore, {
fetch:function(request){
//append here your custom parameters:
var qs = {p1:"This is parameter 1",
q:request.query.name
}
request.serverQuery = qs;
// Call superclasses' fetch
return this.inherited("fetch", arguments);
}
});
So When come to create the QueryReadStore you actually create a object with the class you defined. something like this:
var queryReadStore = new custom.MyReadStore({args...})
Explore the request parameter passed to the function to see what else you can do.
I'm trying to use a single controller to list multiple similar collections so I can call different templates with the same controller. In fact, right now I have 6 controllers for listing and another 6 for forms but they're all duplicates.
I've made a non-functional plunker just to show how I intend it to work. I've avoided declaring routeProviders because knowing it wouldn't work I tried to make it as straight to the point as I could.
http://plnkr.co/edit/d06PcrJS5newhrmNy6EJ?p=preview
I've seen on stackoverflow how to declare a class with a dynamic name:
var str = "MyClass";
var obj = new window[str];
But as I have not been able to find where it's stored I'm not able to retrieve it.
Does anyone have a hint on how to do this?
You can use Angular's injector to return the service instance you want. For example:
app.controller('NodeListCtrl', function($scope, $location, $injector) {
var modelName = $location.path().split("/")[1];
$scope.modelName = modelName.charAt(0).toUpperCase() + modelName.slice(1);
$scope.nodes = $injector.get($scope.modelName).query();
});
Note: Don't forget to add the $injector to the controller's function signature.
jsfiddle: http://jsfiddle.net/bmleite/Mvk2y/
I am trying to add a file to a model using qqfile (though that really isn't relevant here).
I look at the params being passed to the server for update, and I have
{ id: 63, photo: 'foto_file.jpg'}
My understanding was that if an object was passed with an id parameter, rails would understand that as an already existing object, and update that model. If no id parameter is present, Rails would use create.
Is that not correct?? How in this instance can I tell rails to update rather than create?
I'm assuming more code isn't needed here, as my controllers won't really help with the solution because I think the decision is made by rails before it really hits the controller. But I'm happy to post the controller code if it is needed.
--------------- my javascript used to update or create the model ---------------------
render: function(){
var start_form=HandlebarsTemplates['user/userForm'](user.attributes);
$(this.el).html(start_form);
var uploader = new qq.FileUploader({
element: document.getElementById('file-upload'),
action: '/users',
onSubmit: function(id, fileName){
if(MyApp.user.id){
uploader.setParams({
id: MyApp.user.id
});
}
},
debug: true
});
},
The update method is only used when you sent a PUT request, not a POST request. Make sure you're using the PUT method. (If you show your form's code, I can give a more specific answer).
Update -- With your code, try adding this as a parameter to your qq.FileUploader call:
params: {
_method: "put"
}
Rails will look for a _method parameter to handle PUT/DELETE requests.
I couldn't get Dylan's javascript method to work, so in my controller I redirected to my update if the response had an id.
def create
if params[:id]
return self.update
end
#then all my regular create stuff here
end
def update
#all the usual update stuff
end
Say I have a class in Coffeescript:
class MyGame
constructor: () ->
#me = new Player
#opponents = [new Player, new Player]
which would like to test in Jasmine:
describe "MyGame", ->
beforeEach ->
window.game = new MyGame
it "should have two players", ->
expect(window.game.opponents.length).toEqual 2
But I get the error TypeError: Result of expression 'window.game.opponents' [undefined] is not an object.?
The window.game approach also seem awkward to me. If I try to define it as #game = new MyGame I get the error ReferenceError: Can't find variable: MyGame but I guess that has something to do with the way Coffeescript is wrapping things up?
UPDATE: The problem seems more like a reference problem as described above. I'm running with guard-jasmine which looks like
guard 'jasmine', :all_on_start => false, :all_after_pass => false do
watch(%r{app/assets/javascripts/(.+)\.(js\.coffee|js)}) { |m| "spec/javascripts/#{m[1]}_spec.#{m[2]}" }
watch(%r{spec/javascripts/(.+)_spec\.(js\.coffee|js)}) { |m| "spec/javascripts/#{m[1]}_spec.#{m[2]}" }
watch(%r{spec/javascripts/spec\.(js\.coffee|js)}) { "spec/javascripts" }
end
and my jasmine.yml file has:
src_files:
- "app/assets/**/*.js"
- "app/assets/**/*.coffee"
spec_files:
- '**/*[sS]pec.js.coffee'
asset_pipeline_paths:
- app/assets
- spec/javascripts
I get the an ReferenceError: Can't find variable: MyGame so I figure it's either something with the Rails 3.1 asset pipeline or the way Coffeescript wraps objects.
try defining your coffeescript class using the # operator as such:
class #MyGame
constructor: () ->
#me = new Player
#opponents = [new Player, new Player]
this will allow you to access the class from anywhere, such as from your jasmine tests, and also you can get away from attaching testing variables to window:
describe "MyGame", ->
beforeEach ->
#game = new MyGame
it "should have two players", ->
expect(#game.opponents.length).toEqual 2
the reason for this is that coffeescript goes out of its way to avoid introducing global variables by wrapping everything in a closure. unfortunately, this can be undesirable for object-oriented code. using the # operator attaches the class definition to the global this, which is window, and thus allows you to instantiate your classes as you like. you may have some global vars in your global space now, your classes, but for me its an ok trade-off. hope this helps!
I wasn't willing to accept modifying the namespace of my code by using an # symbol in front of all my backbone classes, so I dug around some more and the solution that worked for me was to require the application file in my spec/javascripts/spec.js.coffee file
#= require application
window.game = () -> new MyGame
This will assign a function that returns a new MyGame to window.game. Did you not just want the new instance directly?
window.game = new MyGame
The window.game approach also seem awkward to me.
How about this
describe "MyGame", ->
game = null
beforeEach ->
game = new MyGame
it "should have two players", ->
expect(game.opponents.length).toEqual 2
I have solved the problem by defining every class as class window.MyGame for example. In the spec files I put #= require my_file_name in the top.
Furthermore I have placed both jasminerice.js.coffee and jquery.js in app/assets/javascripts. This might not be the best solution as I assume they should be placed in spec/javascripts/helpers as my spec.js.coffee's content is #=require_tree ./.
I'm aware that this is not very elegant but it might help others in the same situation. #Thilo thanks for your inputs.