I am new to backbone and requirejs...
I am working on a small gallery app where i came across this error in firefox firebug and in chrome it doesn't show any error chrome dev tool... please help me in this
here is my code
PhotosCollectionjs
define([
'jquery',
'underscore',
'backbone',
'models/thumb/PhotoModel'
], function ($, _, Backbone, PhotoModel) {
var PhotosCollection = Backbone.Collection.extend({
model: PhotoModel,
url: '/photos?query=xxx',
fetch: function (options) {
options = options || {};
.......
Backbone.Collection.prototype.fetch.call(this, options);
},
parse: function (response) {
......
return response.photos;
}
});
return PhotosCollection;
});
loadphotos js
define([
'jquery',
'underscore',
'backbone',
'collections/thumb/PhotosCollection'
], function ($, _, Backbone, PhotosCollection) {
console.log(PhotosCollection); .... undefined(firebug) ... function (){return r.apply(this,arguments)} (chrome dev tool)
var loadPhotos = function (container, options) {
var photos;
photos = void 0;
if (options) {
photos = new PhotosCollection();
options.collection = photos;
}
.....................
................
};
return loadPhotos;
});
in firebug it is giving error
TypeError: PhotosCollection is not a constructor
photos = new PhotosCollection();
EDIT
its temporarily solved .... but now again after few refreshes i receive same error in firebug but no error in chrome... Please someone help me
Edit 2
Trial and error i found that it occurs only while debugging with breakpoints.... if i remove all breakpoints its giving no error... is it related to async loading of scripts or something else???
i just included initialize in PhotosCollection js and now its giving no error... i dont know what exactly the problem but it got solved.....
But i am interested in knowing the cause for it... as only firebug thrown error and chrome doesn't... Please give me some insight
here is my new photosCollection js with blank intialize....
define([
'jquery',
'underscore',
'backbone',
'models/thumb/PhotoModel'
], function ($, _, Backbone, PhotoModel) {
var PhotosCollection = Backbone.Collection.extend({
model: PhotoModel,
url: '/photos?query=xxx',
initialize:function(options){},
fetch: function (options) {
options = options || {};
.......
Backbone.Collection.prototype.fetch.call(this, options);
},
parse: function (response) {
......
return response.photos;
}
});
return PhotosCollection;
});
Related
I'm trying to trigger shipping rates recollection on checkout via 3d party JS code, not Knockout. What's the best way to trigger it?
Now I've replaced template onepage.phtml with custom one and trying this approach, but it doesn't work:
require([
'jquery',
'Magento_Checkout/js/model/quote'
], function($, quote) {
$('#target').on('click', function(e) {
console.log(quote.shippingAddress(quote.shippingAddress()));
});
});
ok, guys. Here is the solution:
require([
'jquery',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/shipping-service',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
'Magento_Checkout/js/model/shipping-rate-processor/new-address',
], function($, quote, shippingService, rateRegistry, customerAddressProcessor, newAddressProcessor) {
$('#target').on('click', function(e) {
var address = quote.shippingAddress();
// clearing cached rates to retrieve new ones
rateRegistry.set(address.getCacheKey(), null);
var type = quote.shippingAddress().getType();
if (type) {
customerAddressProcessor.getRates(address);
} else {
newAddressProcessor.getRates(address);
}
});
});
i already tried #c0rewell way
Company_Modulename/view/frontend/requirejs-config.js
var config = {
map: {
'*': {
company: 'Company_Modulename/js/myjs'
}
}
};
Company_Modulename/view/frontend/web/js/myjs.js
require([
'jquery',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/shipping-service',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
'Magento_Checkout/js/model/shipping-rate-processor/new-address',
], function($, quote, shippingService, rateRegistry, customerAddressProcessor, newAddressProcessor) {
$('div[name="shippingAddress.city"] select[name="city2"]').live('change', function(e) {
var address = quote.shippingAddress();
// clearing cached rates to retrieve new ones
rateRegistry.set(address.getCacheKey(), null);
var type = quote.shippingAddress().getType();
if (type) {
customerAddressProcessor.getRates(address);
} else {
newAddressProcessor.getRates(address);
}
});
});
above sciprt successfully force refresh the shipping cost, but the loading takeing forever
error from console
resource-url-manager.js:35 Uncaught TypeError: Cannot read property 'getQuoteId' of undefined
at Object.getUrlForEstimationShippingMethodsByAddressId (resource-url-manager.js:35)
at Object.getRates (customer-address.js:26)
at HTMLSelectElement.<anonymous> (xongkir.js:17)
at HTMLDocument.dispatch (jquery.js:4624)
at HTMLDocument.elemData.handle (jquery.js:4292)
#Ansyori
I have managed to run the estimat-shipping-methods by modifying code like below
require([
'jquery',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/shipping-service',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
'Magento_Checkout/js/model/shipping-rate-processor/new-address',
], function($, quote, shippingService, rateRegistry,
customerAddressProcessor, newAddressProcessor) {
$('div[name="shippingAddress.city"] select[name="city2"]').live('change', function(e) {
var address = quote.shippingAddress();
// clearing cached rates to retrieve new ones
rateRegistry.set(address.getCacheKey(), null);
var type = quote.shippingAddress().getType();
if (type == 'new-customer-address') {
newAddressProcessor.getRates(address);
}
});
});
I have a factory service inside a folder,,,i have mentioned the path in karma.conf.js file correctly and added the angular-mocks before that..But
if i try to load a factory/service which is not available in that folder then Unknown provider error is thrown
If i include the correct factory service then am not getting any error
But if i try to call a method in that factory/service,then the mocked service object is undefined and am getting cannot read a function from undefined error message..
I couldn't figure out why...can any1 help me in this issue..
Spec.js
describe('dfgh', function () {
var mockService,httpBackend;
beforeEach(function () {
module('app');
});
beforeEach(function () {
inject(function ($httpBackend, _familyService_) {
mockService = _familyService_;
httpBackend = $httpBackend;
});
});
it('Factory Service Testing', function () {
/// Code here
});
});
FamilySvc.js
(function() {
'use strict';
angular.module('app')
.factory('familyService', familyService);
familyService.$inject = ['$rootScope', '$http', '$q', 'service2', 'service3'];
function familyService() {
var a="Some String";
return a;
}
}());
Karma.conf.js
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js', --> Holds FamilySvc.js
'tests/*.*' -- >holds Spec.js
],
I was following Lazy Blogger for getting started with routing in knockoutJS using crossroads and hasher and it worked correctly.
Now I needed to refresh the content using ajax for Home and Settings page every time they are clicked. So I googled but could not find some useful resources. Only these two links
Stack Overflow Here I could not understand where to place the ignoreState property and tried these. But could not make it work.
define(["jquery", "knockout", "crossroads", "hasher"], function ($, ko, crossroads, hasher) {
return new Router({
routes:
[
{ url: '', params: { page: 'product' } },
{ url: 'log', params: { page: 'log' } }
]
});
function Router(config) {
var currentRoute = this.currentRoute = ko.observable({});
ko.utils.arrayForEach(config.routes, function (route) {
crossroads.addRoute(route.url, function (requestParams) {
currentRoute(ko.utils.extend(requestParams, route.params));
});
});
activateCrossroads();
}
function activateCrossroads() {
function parseHash(newHash, oldHash) {
//crossroads.ignoreState = true; First try
crossroads.parse(newHash);
}
crossroads.normalizeFn = crossroads.NORM_AS_OBJECT;
hasher.initialized.add(parseHash);
hasher.changed.add(parseHash);
hasher.init();
$('a').on('click', function (e) {
crossroads.ignoreState = true; //Second try
});
}
});
Crossroads Official Page Here too I could not find where this property need to be set.
If you know then please point me to some url where I can get more details about this.
$state.go isn't transitioning to default.settings.customization but instead its going to our 'main frontpage' default.feed
I think it has to do with the resolve, since when I change var state to a different state, it works just fine.
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('default.settings.customization', {
url: '/settings/customization',
templateUrl: 'app/settings/customization/customization.html',
controller: 'CustomizationCtrl',
auth: {
authorizedRoles: ['admin']
},
resolve: {
customization: [
'CustomizationService',
function(CustomizationService) {
return CustomizationService.get().then(function(res) {
return res.data;
});
}
]
}
});
}]);
Test:
var state = 'default.settings.customization';
it('should resolve data', function() {
customizationServiceMock.get = jasmine.createSpy('customizationServiceMockGet')
.and.returnValue(apiResp.accountCustomization);
$state.go(state);
$rootScope.$apply();
expect($state.current.name).toBe(state);
});
LOG:
PhantomJS 1.9.8 (Linux) app/settings/customization router should resolve data FAILED
Expected 'default.feed' to be 'default.settings.customization'.
Error: Expected 'default.feed' to be 'default.settings.customization'.
I think it's related to your spy function, check that apiResp is available in your scope. I had a similary problem, I used $q to return a promise in my spy function but $q was not injected.
I am using jQuery Mobile and iScrollview together,
I used iscrollView
The scrolling work fine.
Problem 1:
when I click on a input text/password field, I get an extra box overlapping the whole elements, which has the same content as the input.
same problem found in
here no solution
Problem 2:
when navigating to next page, the previous page remains behind new page and when tap the mobile screen the previous page goes off from the device. this is not happening in the webbrowsers.
Any suggestions,
code for main.js
require.config({
paths: {
jquery: '../lib/jquery',
'jquery.mobile-config': 'helper/jqm-config',
'jquery.mobile': '../lib/jquery.mobile-1.2.1.min',
underscore: '../lib/underscore-min',
backbone: '../lib/backbone-min',
templates: '../templates',
text: 'helper/text',
config: 'helper/config',
'backbone.subroute': '../lib/backbone.subroute',
'cookie': '../lib/jquery.cookie',
'maskInput': '../lib/Jquerymaskinput',
'iscroll': '../lib/iscroll',
'iscrollview': '../lib/jquery.mobile.iscrollview',
}
,
shim: {
'underscore': {
exports: "_"
},
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['jquery', 'underscore'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'jquery.mobile-config': ['jquery'],
'jquery.mobile': ['jquery', 'jquery.mobile-config'],
'backbone.subroute': ['jquery', 'underscore', 'backbone'],
//'backbone.oauth':['jquery','underscore','backbone'],
'iscroll': {
deps: ['jquery.mobile']
},
'iscrollview': {
deps: ['iscroll']
},
'config': {
exports: 'Config'
}
}
});
requirejs(['jquery', 'iscroll', 'jquery.mobile', 'iscrollview'], function($, iScroll) {
var elements = jQuery(document).find(":jqmData(iscroll)");
elements.iscrollview();
});
require([
'app'
], function(App) {
App.initialize();
});
for router
define([
'jquery',
'underscore',
'backbone',
'backbone.subroute'
], function($, _, Backbone) {
var AppRouter = Backbone.Router.extend({
routes: {
// general routes
'': 'defaultAction',
'login':'login',
'menu': 'mainMenu',
// Default
'*actions': 'defaultAction'
}
});
var initialize = function() {
$('.back').live('click', function(event) {
event.preventDefault();
window.history.back();
return false;
});
var app_router = new AppRouter;
app_router.on('route:defaultAction', function(actions) {
require(['views/home/register'], function(RegisterView) {
// We have no matching route, lets display the home page
console.log('At defaultAction');
var registerView = new RegisterView();
registerView.render();
/// this.changePage(loginView, 'slide');
});
});
app_router.on('route:login', function(actions) {
require(['views/home/login'], function(LoginView) {
// We have no matching route, lets display the home page
console.log('At defaultAction');
var loginView = new LoginView();
loginView.render();
/// this.changePage(loginView, 'slide');
});
});
app_router.on('route:mainMenu', function(actions) {
require(['views/home/menu'], function(MainMenuView) {
console.log('At mainMenu::router');
var mainMenuView = new MainMenuView();
mainMenuView.render();
// this.changePage(mainMenuView, 'slide');
});
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
I rewrite the codes but, its more or less solved my problem updated the jqm to 1.3 and jquery to 1.9.
rewrite all css files.
Navigation to next page is fine
and at least its working now.
Thanks to Omar who helped me.
gracias mi amigo