I want to use canvasjs using requirejs. The code like this:
require.config({
shim: {
'canvasjs' : {
deps: ['jquery'],
chart: {
exports: 'Chart'
}
}
},
paths: {
"jquery": "../js/jquery-1.10.2.min",
"canvasjs": "../js/canvasjs.min"
}
});
require(["jquery", "canvasjs"], function($, CanvasJS) {
function AppViewModel() {
var self = this;
}
var chart = new CanvasJS.Chart("chartContainer", {})
}
)
But the console of browser showing error like this:
what wrong with the code ? thanks
looks like name clashing, remove CanvasJS from callback parameter of Require call.
try following
require.config({
shim: {
'canvasjs' : {
deps: ['jquery'],
chart: {
exports: 'Chart'
}
}
},
paths: {
"jquery": "../js/jquery-1.10.2.min",
"canvasjs": "../js/canvasjs.min"
}
});
require(["jquery", "canvasjs"], function($) {
function AppViewModel() {
var self = this;
}
var chart = new CanvasJS.Chart("chartContainer", {})
}
)
Related
When I run "grunt svgstore" I get this:
No "svgstore" targets found. Warning: Task "svgstore" failed. Use --force to continue. Aborted due to warnings.
Why?
This is part of my gruntfile (I can't post more).
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-svgstore');
grunt.initConfig({
svgstore: {
options: {
formatting : {
indent_size : 2
}
},
default: {
files: {
'images/svg/defs.svg': ['images/svg/*.svg'],
},
},
},
},
});
// Default task(s)
grunt.registerTask('default', ['sass_globbing', /*'sprite:icons_dev'*/, 'sass']);
grunt.registerTask('icon_sprite', ['sprite:icons_dev']);
//grunt.registerTask('stage_deploy', ['sass_globbing', 'sprite:flags_dev', 'sprite:icons_dev', 'sass']);
//grunt.registerTask('prod_deploy', ['sass_globbing', 'sprite:flags_prod', 'sprite:icons_prod', 'tinypng', 'sass']);
};
I had a similar problem. Not sure what is the solution but I have solved it after I took a look on sample Gruntfile.js. The only difference I can spot between mine and yours Gruntfile is that I call loadNpmTasks after initConfig.
Take a look here:
module.exports = function(grunt) {
grunt.initConfig({
svgstore: {
options: {
prefix : 'pfx-', // This will prefix each ID
svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
},
formatting : {
indent_size : 2
},
symbol : {},
includedemo: true,
cleanup: true,
cleanupdefs: true,
},
default : {
files: {
'export/pfx-icons.svg': ['svgs/*.svg'],
},
},
},
});
grunt.loadNpmTasks('grunt-svgstore');
grunt.registerTask('default', ['svgstore']);
};
How to query the key values of properties in LoopBack? In my case, the keys are array of objects.
The schema I generated is,
{
"bookingsLog": [
{
"checkIn": 1456079400000,
"checkOut": 1456165800000
},
{
"checkIn": 1456079400000,
"checkOut": 1456165800000
}
]
}
The remote method used to query is,
Resort.search = function(custom, cb) {}
Resort.remoteMethod('search', {
accepts: {
arg: 'custom',
type: 'object',
http: function(ctx) {
var _cIn = ctx.req.body.checkIn;
var _cOut = ctx.req.body.checkOut;
Resort.find({
where: {
and: [{ checkIn: { neq: _cIn } }, { checkOut: { neq: _cOut } },
{ checkIn: { neq: { between: [_cIn, _cOut] } } },
{ checkOut: { neq: { between: [_cIn, _cOut] } } }
]
}
}, function(err, resorts) {
console.log('Length is = ' + resorts.Length);
console.log('Res is = ' + JSON.stringify(resorts));
if(err){return ctx.res.send(err);}
if(resorts){return ctx.res.send(resorts);}
});
}
},
returns: {
arg: 'custom',
type: 'object'
}
});
Thanks in advance!
I want to do something like
// server.js
app.use('/client', loopback.static(__dirname + '/../client'))
using middleware.json, but the example only works from the root
"files": {
"loopback#static": {
"params": "$!../client"
}
},
You have to use paths property, i.e.
"files": {
"loopback#static": {
"paths": "/client",
"params": "$!../client"
}
},
The detail is here.
I created a new file boot/routes.js
var path = require("path");
module.exports = function(app) {
app.get('/ping', function(req, res) {
res.sendFile(pt('client/index.html'));
});
};
function pt(relative) {
return path.resolve(__dirname, '../..', relative);
}
Did you try?
"files": {
"loopback#static": {
"params": "$!../../client"
}
}
I want to display predictive text in search field, value for predictive text which comes from server. Here is my code so far:
View:
Ext.define('MyApp.view.AutoSearch', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',
config: {
store : 'AutoSearchStore',
itemTpl: '<div class="myWord">'+
'<div>Word is --<b>{name}</b>--- after search!!!</div>' +
'</div>',
emptyText: '<div class="myWord">No Matching Words</div>',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
itemId: 'searchBox'
}
]
}
]
}
});
Store:
Ext.define('MyApp.store.AutoSearchStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.AutoSearchModel',
autoLoad:true,
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363',
reader:
{
rootProperty:''
}
}
}
});
Model:
Ext.define('MyApp.model.AutoSearchModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.AutoSearchModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'name'},
],
},
});
and
Ext.define('MyApp.model.AutoSearchModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
'name',
],
belongsTo: "MyApp.model.AutoSearchModel"
}
});
Controller:
Ext.define('MyApp.controller.SearchAutoComplete', {
extend : 'Ext.app.Controller',
config: {
profile: Ext.os.deviceType.toLowerCase(),
stores : ['MyApp.store.AutoSearchStore'],
models : ['MyApp.model.AutoSearchModel'],
refs: {
myContainer: 'mainPanel'
},
control: {
'mainPanel': {
activate: 'onActivate'
},
'mainPanel searchfield[itemId=searchBox]' : {
clearicontap : 'onClearSearch',
keyup: 'onSearchKeyUp'
}
}
},
onActivate: function() {
console.log('Main container is active--Search');
},
onSearchKeyUp: function(searchField) {
queryString = searchField.getValue();
console.log(this,'Please search by: ' + queryString);
var store = Ext.getStore('AutoSearchStore');
store.clearFilter();
if(queryString){
var thisRegEx = new RegExp(queryString, "i");
store.filterBy(function(record) {
if (thisRegEx.test(record.get('name'))) {
return true;
};
return false;
});
}
},
onClearSearch: function() {
console.log('Clear icon is tapped');
var store = Ext.getStore('AutoSearchStore');
store.clearFilter();
},
init: function() {
console.log('Controller initialized for SearchAutoComplete');
}
});
Json Data Looks Like:
"data":[
{
"name":"paint",
"author":"admin",
"word_id":"1",
"category":"Business",
"is_favourite":"yesStar"
},
{
"name":"abacus",
"author":"admin",
"word_id":"2",
"category":"Education",
"is_favourite":"yesStar"
},
{
"name":"abate",
"author":"admin",
"word_id":"3",
"category":"Education",
"is_favourite":"noStar"
},
{
"name":"testing adsf",
"author":"admin",
"word_id":"7",
"category":"Education",
"is_favourite":"noStar"
},
{
"name":"sprite",
"author":"admin",
"word_id":"6",
"category":"Business",
"is_favourite":"noStar"
},
{
"name":"newword",
"author":"admin",
"word_id":"8",
"category":"Architecture",
"is_favourite":"noStar"
}
]
})
If I type "A", then it displays No Matching Words, but I have words from "A" on json coming from server. How to solve this problem?
Any idea!
Code Sources Link
I don't know why you are using two models but just one thing you need to specify in AutoSearchStore :
reader:
{
rootProperty:'data'
}
instead of
reader:
{
rootProperty:''
}
to get the expected results in the list.
Hope this will be helpful :)
I'm trying to load Zurb Foundation 3 with RequireJS. Here's my configuration section:
require.config({
paths:
{
'jquery': 'libs/jquery/jquery',
'foundation': 'libs/foundation/foundation.min',
'foundation-init': 'libs/foundation/app'
},
shim:
{
'foundation': {
deps: ['jquery']
},
'foundation-init': {
deps: ['foundation']
}
}
});
Then, always in the main file, I include Foundation:
require(['foundation-init']);
The problem is that, for example, the top-bar doesn't expand (jquery animation) like it should do (see here: http://foundation.zurb.com/docs/navigation.php#topbarEx). It's like the Foundation jQuery plugins are not correctly loaded. As I read, that's the reason why in the Foundation doc the scripts are loaded at the end of the body. But, obviously, with RequireJS it's a little more complex. I've temporarily fixed like suggested in the RequireJS doc ("Loading Code After Page Load" section), setting a timeout like that:
setTimeout(function() { require(['foundation-init']); }, 500);
I don't think it's a good solution. Any idea?
Ok, I resolved the problem with a little hack!
As I supposed, the problem was that the new DOM section after the view rendering with Backbone, has Foundation jQuery events not binded.
My solution is to create a new plugin function .foundation(), which has to be applied to a section of the DOM for initializing Foundation on it. So, I modified the file app.js of the Foundation package from:
;(function ($, window, undefined) {
'use strict';
var $doc = $(document),
Modernizr = window.Modernizr;
$(document).ready(function() {
$.fn.foundationAlerts ? $doc.foundationAlerts() : null;
$.fn.foundationButtons ? $doc.foundationButtons() : null;
$.fn.foundationAccordion ? $doc.foundationAccordion() : null;
$.fn.foundationNavigation ? $doc.foundationNavigation() : null;
$.fn.foundationTopBar ? $doc.foundationTopBar() : null;
$.fn.foundationCustomForms ? $doc.foundationCustomForms() : null;
$.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer() : null;
$.fn.foundationTabs ? $doc.foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null;
$.fn.foundationTooltips ? $doc.foundationTooltips() : null;
$.fn.foundationMagellan ? $doc.foundationMagellan() : null;
$.fn.foundationClearing ? $doc.foundationClearing() : null;
$.fn.placeholder ? $('input, textarea').placeholder() : null;
});
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});
// Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking).
if (Modernizr.touch && !window.location.hash) {
$(window).load(function () {
setTimeout(function () {
window.scrollTo(0, 1);
}, 0);
});
}
})(jQuery, this);
to:
;(function ($, window, undefined) {
'use strict';
$.fn.foundation = function () {
$.fn.foundationAlerts ? $(this).foundationAlerts() : null;
$.fn.foundationButtons ? $(this).foundationButtons() : null;
$.fn.foundationAccordion ? $(this).foundationAccordion() : null;
$.fn.foundationNavigation ? $(this).foundationNavigation() : null;
$.fn.foundationTopBar ? $(this).foundationTopBar() : null;
$.fn.foundationCustomForms ? $(this).foundationCustomForms() : null;
$.fn.foundationMediaQueryViewer ? $(this).foundationMediaQueryViewer() : null;
$.fn.foundationTabs ? $(this).foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null;
$.fn.foundationTooltips ? $(this).foundationTooltips() : null;
$.fn.foundationMagellan ? $(this).foundationMagellan() : null;
$.fn.foundationClearing ? $(this).foundationClearing() : null;
$.fn.placeholder ? $(this).find('input, textarea').placeholder() : null;
};
var $doc = $(document),
Modernizr = window.Modernizr;
$(document).ready(function() {
$doc.foundation();
});
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});
// Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking).
if (Modernizr.touch && !window.location.hash) {
$(window).load(function () {
setTimeout(function () {
window.scrollTo(0, 1);
}, 0);
});
}
})(jQuery, this);
About RequireJS, it's necessary to include all the Foundation (ver 3.2.5) plugins file and not the minified one. So, my main.js looks like that:
require.config({
paths:
{
'jquery': 'libs/jquery/jquery',
'underscore': 'libs/underscore/underscore',
'backbone': 'libs/backbone/backbone',
'jquery-event-move': 'libs/foundation/jquery.event.move',
'jquery-event-swipe': 'libs/foundation/jquery.event.swipe',
'jquery-placeholder': 'libs/foundation/jquery.placeholder',
'foundation-modernizr': 'libs/foundation/modernizr.foundation',
'foundation-accordion': 'libs/foundation/jquery.foundation.accordion',
'foundation-alerts': 'libs/foundation/jquery.foundation.alerts',
'foundation-buttons': 'libs/foundation/jquery.foundation.buttons',
'foundation-clearing': 'libs/foundation/jquery.foundation.clearing',
'foundation-forms': 'libs/foundation/jquery.foundation.forms',
'foundation-joyride': 'libs/foundation/jquery.foundation.joyride',
'foundation-magellan': 'libs/foundation/jquery.foundation.magellan',
'foundation-media-query-toggle': 'libs/foundation/jquery.foundation.mediaQueryToggle',
'foundation-navigation': 'libs/foundation/jquery.foundation.navigation',
'foundation-orbit': 'libs/foundation/jquery.foundation.orbit',
'foundation-reveal': 'libs/foundation/jquery.foundation.reveal',
'foundation-tabs': 'libs/foundation/jquery.foundation.tabs',
'foundation-tooltips': 'libs/foundation/jquery.foundation.tooltips',
'foundation-topbar': 'libs/foundation/jquery.foundation.topbar',
'foundation-app': 'libs/foundation/app',
},
shim:
{
'underscore': {
deps: ['jquery'],
exports: '_'
},
'backbone': {
deps: ['underscore'],
exports: 'Backbone'
},
'models/User': {
deps: ['backbone', 'environment'],
exports: 'User'
},
'models/Token': {
deps: ['backbone', 'environment'],
exports: 'Token'
},
'jquery-event-move': {
deps: ['jquery']
},
'jquery-event-swipe': {
deps: ['jquery']
},
'jquery-placeholder': {
deps: ['jquery']
},
'foundation-modernizer': {
deps: ['jquery']
},
'foundation-accordion': {
deps: ['jquery']
},
'foundation-alerts': {
deps: ['jquery']
},
'foundation-buttons': {
deps: ['jquery']
},
'foundation-clearing': {
deps: ['jquery']
},
'foundation-forms': {
deps: ['jquery']
},
'foundation-joyride': {
deps: ['jquery']
},
'foundation-magellan': {
deps: ['jquery']
},
'foundation-media-query-toggle': {
deps: ['jquery']
},
'foundation-navigation': {
deps: ['jquery']
},
'foundation-orbit': {
deps: ['jquery']
},
'foundation-reveal': {
deps: ['jquery']
},
'foundation-tabs': {
deps: ['jquery']
},
'foundation-tooltips': {
deps: ['jquery']
},
'foundation-topbar': {
deps: ['jquery']
},
'foundation-app': {
deps: [
'jquery',
'jquery-event-move',
'jquery-event-swipe',
'jquery-placeholder',
'foundation-modernizr',
'foundation-alerts',
'foundation-buttons',
'foundation-clearing',
'foundation-forms',
'foundation-joyride',
'foundation-magellan',
'foundation-media-query-toggle',
'foundation-navigation',
'foundation-orbit',
'foundation-reveal',
'foundation-tabs',
'foundation-tooltips',
'foundation-topbar',
]
},
}
});
// Requiring Foundation framework
require(['foundation-app']);
// Instantiating MVC
require([
'app',
], function(App)
{
App.initialize();
});
In the end, to make the Backbone views to render correctly with Foundation (at least with new DOM sections), I do like that:
define([
'jquery',
'underscore',
'backbone',
'foundation-app'
], function($, _, Backbone)
{
var FoundationView = Backbone.View.extend(
{
el: $('#view-placeholder'),
initialize: function()
{
this.on('post-render', this.onPostRender, this);
},
render: function(content)
{
var content = 'new dom section';
$(this.el).html(content);
this.trigger('post-render');
},
onPostRender: function()
{
$(this.el).foundation();
}
});
return FoundationView;
});