We Keep Coding

Source property in event object cause rendering to fail

I am using jquery Full Calendar and run into this issue. I have two calendars in the same view. When I clicked on one event in the left calendar, it should disappear and at the same time, the same event would appear in the right calendar.
The issue is caused by the source property in the event object.
eventClick: function(calEvent, jsEvent, view) {
var a = {
"id": 5,
"color": "#2CC870",
"title": "work",
"name": "Helen",
"start": "2016-07-28T14:37:00.000Z",
"end": "2016-07-28T16:37:00.000Z",
"_id": "5",
"className": [],
"allDay": false,
"_allDay": false,
"_start": "2016-07-28T14:37:00.000Z",
"_end": "2016-07-28T16:37:00.000Z",
// "source": {
// "url": "/requests/employer",
// "className": [],
// "_fetchId": 1,
// "_status": "resolved"
// },
}
$('#js-request-employer-calendar').fullCalendar('removeEvents',a.id);
$('#js-request-employee-calendar').fullCalendar('renderEvent',a);
console.log(calEvent);
console.log(jsEvent);
console.log(view);
// change the border color just for fun
$(this).css('border-color', 'red');
}
If I keep the source property in the event object, new events won't show up. If I hide it, it works.
Thanks for the help!!

That is the expected behaviour. The source property must be automatically populated.
If you're trying to add an event to a specific source, this won't be fixed, see details on the bug tracker: https://github.com/fullcalendar/fullcalendar/issues/2537
The only other solution would be to remove and immediately add back your event source.

Highlight.js custom language definition

I'm trying to create language definition for highlight.js.
But it doesn't work. I've got an example.
In this example i'm trying to create custom "aaa" language, which is the same as JSON. registerLanguage function receives same function as a default JSON highlight function (from highlight.js sources).
hljs.listLanguages() shows, that language is registered.
After, i'm calling hljs.highlightBlock(block).
<code class="aaa"> forces to use custom "aaa" language, and in this case hljs.highlightBlock(block) doesn't changes content.
$(document).ready(function() {
// registering aaa language (JSON alias)
// code from https://github.com/isagalaev/highlight.js/blob/master/src/languages/json.js
hljs.registerLanguage("aaa", function(hljs) {
var LITERALS = {
literal: 'true false null'
};
var TYPES = [
hljs.QUOTE_STRING_MODE,
hljs.C_NUMBER_MODE
];
var VALUE_CONTAINER = {
className: 'value',
end: ',',
endsWithParent: true,
excludeEnd: true,
contains: TYPES,
keywords: LITERALS
};
var OBJECT = {
begin: '{',
end: '}',
contains: [{
className: 'attribute',
begin: '\\s*"',
end: '"\\s*:\\s*',
excludeBegin: true,
excludeEnd: true,
contains: [hljs.BACKSLASH_ESCAPE],
illegal: '\\n',
starts: VALUE_CONTAINER
}],
illegal: '\\S'
};
var ARRAY = {
begin: '\\[',
end: '\\]',
contains: [hljs.inherit(VALUE_CONTAINER, {
className: null
})], // inherit is also a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents
illegal: '\\S'
};
TYPES.splice(TYPES.length, 0, OBJECT, ARRAY);
return {
contains: TYPES,
keywords: LITERALS,
illegal: '\\S'
};
});
console.log(hljs.listLanguages()); // aaa in the list
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<pre><code class="aaa">
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
</code></pre>

Highlight.js have a minification/packing process during build that renames the fields of the language definition objects. This means that the objects they describe in http://highlightjs.readthedocs.org/en/latest/language-guide.html won't work with the distributed library. Only languages defined before build time will work this way.
You could look in the minified highlightjs file for usages of registerLanguage to try and reverse engineer the names of fields.

gulp-jscs Object.keys called on non-object

I'm a novice at gulp, and trying to play with it. I get this error when I try to use gulp-jscs
'default' errored after 98 ms
[16:58:00] TypeError: Object.keys called on non-object
at Function.keys (native)
at NodeConfiguration.Configuration._throwNonCamelCaseErrorIfNeeded (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp-jscs/node_modules/jscs/lib/config/configuration.js:440:12)
at NodeConfiguration.Configuration.load (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp-jscs/node_modules/jscs/lib/config/configuration.js:51:10)
at StringChecker.configure (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp-jscs/node_modules/jscs/lib/string-checker.js:66:29)
at Checker.configure (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp-jscs/node_modules/jscs/lib/checker.js:26:39)
at module.exports (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp-jscs/index.js:31:11)
at Gulp.<anonymous> (/home/kbadr/Node_Projects/demo/membership/gulpfile.js:22:15)
at module.exports (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/kbadr/Node_Projects/demo/membership/node_modules/gulp/node_modules/orchestrator/index.js:214:10
and here's my gulpfile
var gulp = require('gulp');
var jscs = require('gulp-jscs');
gulp.task('default', function () {
return gulp.src('src/app.js')
.pipe(jscs());
});

This seems to happen if jscs doesn't have read access to your .jscsrc or if it doesn't exist. This happened to me after copying and pasting it from an old git repro. To fix this open the file with a text editor and resave it, accepting the prompt to overwrite as well as starting with a '.' (e.g. .jscsrc) Run your task again and it will complete.

I had the same problem: "Unable to load JSCS config file at /Desktop/node/My_Project_Name/.jscsrc
Unexpected end of input...."
I was able to solve the problem by first checking to see if the file existed in the root of my project. in terminal run this command:
ls -ld .?*
The file was never created for me so I created the .jscsrc file then I added the following code:
{
"excludeFiles": ["node_modules/**", "bower_components/**"],
"requireCurlyBraces": [
"if",
"else",
"for",
"while",
"do",
"try",
"catch"
],
"requireOperatorBeforeLineBreak": true,
"requireCamelCaseOrUpperCaseIdentifiers": true,
"maximumLineLength": {
"value": 100,
"allowComments": true,
"allowRegex": true
},
"validateIndentation": 4,
"validateQuoteMarks": "'",
"disallowMultipleLineStrings": true,
"disallowMixedSpacesAndTabs": true,
"disallowTrailingWhitespace": true,
"disallowSpaceAfterPrefixUnaryOperators": true,
"disallowMultipleVarDecl": null,
"requireSpaceAfterKeywords": [
"if",
"else",
"for",
"while",
"do",
"switch",
"return",
"try",
"catch"
],
"requireSpaceBeforeBinaryOperators": [
"=", "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=",
"&=", "|=", "^=", "+=",
"+", "-", "*", "/", "%", "<<", ">>", ">>>", "&",
"|", "^", "&&", "||", "===", "==", ">=",
"<=", "<", ">", "!=", "!=="
],
"requireSpaceAfterBinaryOperators": true,
"requireSpacesInConditionalExpression": true,
"requireSpaceBeforeBlockStatements": true,
"requireLineFeedAtFileEnd": true,
"disallowSpacesInsideObjectBrackets": "all",
"disallowSpacesInsideArrayBrackets": "all",
"disallowSpacesInsideParentheses": true,
"validateJSDoc": {
"checkParamNames": true,
"requireParamTypes": true
},
"disallowMultipleLineBreaks": true,
"disallowCommaBeforeLineBreak": null,
"disallowDanglingUnderscores": null,
"disallowEmptyBlocks": null,
"disallowMultipleLineStrings": null,
"disallowTrailingComma": null,
"requireCommaBeforeLineBreak": null,
"requireDotNotation": null,
"requireMultipleVarDecl": null,
"requireParenthesesAroundIIFE": true
}
Save this file to the root of your project, then run the gulp task command again it should work.

Updated the dependency in bower.json on ngCordova and resolved the issue !!!

AngularJS - parsing JSON feed with namespace

New to angular, and it is awesome.
One thing I am having a brain fart on is parsing a JSON feed that contains namespaces:
Example from JSON feed:
"title": {
"label": "Fuse"
},
"im:name": {
"label": "John Doe"
},
"im:image": [ {
"label": "70x70",
"attributes": {
"height": "55"
}
}, {
"label": "80x80",
"attributes": {
"height": "60",
"im:link": "www.google.com"
}
}, {
"label": "90x90",
"attributes": {
"height": "170"m
"im:link": "www.yahoo.com"
}
}],
I can successfully parse items without namespaces fine like so:
<p ng-repeat="item in results.feed['entry']">
title: {{item.title['label']}}
</p>
But cannot get the items with namespaces to display using:
name: {{item.['im:name']['label']}}
OR
name: {{item.['im-name']['label']}}
OR
name: {{item.['im->name']['label']}}
Since being a newbie, I thought something like this would work:
<div xmlns:im="http://www.aol.com" id="im-app" im-app="im">
<p ng-repeat="item in results.feed['entry']">
…namespace code in here…
</p>
</div>
But that did not help.
Extra bonus question: What if a namespace contains attributes, that also contain namespaces?
Any help would greatly be appreciated.
Thanks!
Roc.
Although Craig answered the question,
This is also for reference for others:
If you want to target a specific key inside of an object set:
"im:image":[
{
"label":google",
"attributes":{
"height":"55"
}
},
{
"label":"yahoo",
"attributes":{
"height":"60"
}
},
{
"label":"aol",
"attributes":{
"height":"170"
}
}
{{item['im:image'][2]['label']}}
Will get the 3rd key in that set.
Thanks.

Get rid of the dot after item
Working example: http://jsfiddle.net/bonza_labs/Kc2uk/
You access the properties exactly the same way as straight javascript (because angular is basically eval()-ing the expression as javascript**). item.['foo'] is not valid javascript. You are correct in using square-bracket notation as my:name is not valid for dot-notation.
valid:
item.foo
item['foo']
with non-standard property names:
item['foo:bar']
item['foo-bar']
and in your case:
{{item['im:name']['label']}}
** or close enough for understanding this solution

Using updateFromJS is replacing values when it should be adding them

I have this code:
var attachmentsModel = {
convAttachments: ko.mapping.fromJS([])
};
$(function() {
ko.applyBindings(attachmentsModel)
refreshConvAttachments();
});
function refreshConvAttachments() {
$.ajax({
url: '/xxxxxxx/',
success: function (dataJS) {
// Send KO the data
ko.mapping.updateFromJS(attachmentsModel.convAttachments, dataJS);
}
});
}
The AJAX call above returns:
[{
"title": "BillGates",
"added_by": "xxx",
"thumb": "urlhere",
"id": 410,
"link": "/link/410",
"added_on": "2011-02-22T12:57:09-08:00"
}, {
"title": "biz-stone",
"added_by": "xxx",
"urlhere",
"id": 411,
"link": "/link/411",
"added_on": "2011-02-22T12:57:53-08:00"
}]
This works fine. Later though the user is able to add an attachment, and that's where it's breaking. While it adds the new attachment to the mode, and displays on the page, it removes all the previously loaded items in the attachmentsModel.convAttachments.
Later on, this happens:
ko.mapping.updateFromJS(attachmentsModel.convAttachments, file);
Ajax Returns:
[{
"title": "eric_schmidt",
"added_by": "xxx",
"thumb": "xxxxxx",
"id": 417,
"link": "/link/417",
"added_on": "2011-02-22T13:16:45-08:00"
}]
I hope that gives a clear walk through, if not please let me know. Any ideas why knockoutjs is kill everything when I use updateFromJS?

ko.mapping.updateFromJS() expects that you are receiving the complete list of items that was originally prepared with ko.mapping.fromJS(). Any items that are missing from the original are considered to be deleted and any new items in the updates are considered additions. So, currently the mapping plugin will not allow you to do incremental updates in this way.
If you are doing incremental updates, your best bet would be to locate the items that you need to update and either replace them completely or replace individual observables on each item.

you could always try using
$.extend(attachmentsModel.convAttachments,ko.mapping.fromJS(dataJS));
Although i am not quite sure if that will update all the bindings properly, you might have to reply the binding by calling
ko.applyBindings(attachmentsModel)