Ember 1.13 upgradation - javascript

I'm upgrading the code from Ember 1.0.4 to Ember 1.13. When I'm execute the below code using ember 1.13 I'm getting the error
title: Ember.computed('content.title', 'managedObject.isHome', 'managedObject.finalManagedObject', {
set: function(name, value) {
this.set('content.title', value);
},
if (this.get('content.title') !== undefined) {
return title;
}
if (this.get('managedObject') == Core.rootNode) {
return "Home";
}
get: function() {
return this.get('managedObject.label') || this.get('managedObject.finalManagedObject.displayName');
}
}),
I'm getting the below error while execute the code.
Uncaught SyntaxError: Unexpected token this

You are using an object to define a computed property. That object must have a get and may have a set function. Both are present. But you have six additional that aren't valid syntax in object definition. You are trying to construct an object like this:
{
set: function(name, value) {
this.set('content.title', value);
},
if (this.get('content.title') !== undefined) {
return title;
}
if (this.get('managedObject') == RSuite.rootNode) {
return "Home";
}
get: function() {
return this.get('managedObject.label') || this.get('managedObject.finalManagedObject.displayName');
}
}
The valid part of that object is:
{
set: function(name, value) {
this.set('content.title', value);
},
get: function() {
return this.get('managedObject.label') || this.get('managedObject.finalManagedObject.displayName');
}
}
Depending on your babel configuration you might be able to simplify it to:
{
set(name, value) {
this.set('content.title', value);
},
get() {
return this.get('managedObject.label') || this.get('managedObject.finalManagedObject.displayName');
}
}
I hope it's clear now. This has nothing to do with upgrade from Ember 1.0.4 to Ember 1.13 in particular. Please have in mind that Ember 1.13 is very old. 2.0 was released more than three years ago. So I would strongly recommend to continue migration until you reach at least to 2.18.

I got the answer by using the below code:
title: Ember.computed('content.title', 'managedObject', 'managedObject.label', 'managedObject.finalManagedObject.displayName', {
set: function(titleKey, newTitle) {
this.set('content.title', newTitle);
if (newTitle !== undefined) {
return newTitle;
} else if (this.get('managedObject') === Core.rootNode) {
return 'Home';
}
return this.get('managedObject.label') || this.get('managedObject.finalManagedObject.displayName');
},
get: function() {
var title = this.get('content.title');
if (title !== undefined) {
return title;
} else if (this.get('managedObject') === Core.rootNode) {
return 'Home';
}
return this.get('managedObject.label') || this.get('managedObject.finalManagedObject.displayName');
}
}),
Thanks for your suggestions Rinold Simon and jelhan.

I think the this reference is lost. Try replacing your code with the below one,
title: Ember.computed('content.title', 'managedObject.isHome', 'managedObject.finalManagedObject', {
set(name, value) {
this.set('content.title', value);
},
get() {
return this.get('managedObject.label') || this.get('managedObject.finalManagedObject.displayName');
}
if (this.get('content.title') !== undefined) {
return title;
}
if (this.get('managedObject') == RSuite.rootNode) {
return "Home";
}
}),

Related

Where to register Handlebars Helper?

working currently with a code base that I'm not familiar with and I'm trying to instantiate some comparison operators with Handlebars.js that's already in place. Where can I add this registerHelper to the JS file?
Helper I need to register:
Handlebars.registerHelper('ifCond', function(v1, v2, options) {
if(v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});
Area I think I need to put it?
function HandlebarsEnvironment(helpers, partials, decorators) {
this.helpers = helpers || {};
this.partials = partials || {};
this.decorators = decorators || {};
_helpers.registerDefaultHelpers(this);
_decorators.registerDefaultDecorators(this);
}
HandlebarsEnvironment.prototype = {
constructor: HandlebarsEnvironment,
logger: _logger2['default'],
log: _logger2['default'].log,
registerHelper: function registerHelper(name, fn) {
if (_utils.toString.call(name) === objectType) {
if (fn) {
throw new _exception2['default']('Arg not supported with multiple helpers');
}
_utils.extend(this.helpers, name);
} else {
this.helpers[name] = fn;
}
},
unregisterHelper: function unregisterHelper(name) {
delete this.helpers[name];
},
registerPartial: function registerPartial(name, partial) {
if (_utils.toString.call(name) === objectType) {
_utils.extend(this.partials, name);
} else {
if (typeof partial === 'undefined') {
throw new _exception2['default']('Attempting to register a partial called "' + name + '" as undefined');
}
this.partials[name] = partial;
}
},
unregisterPartial: function unregisterPartial(name) {
delete this.partials[name];
},
Thanks for your help.

LIVR Validate if element in object is empty array

I have LIVR in a project i'm working now and is quite unclear to me how this work. I can't understand how to create new rules for custom validation.
Here's the code:
LIVR.Validator.defaultAutoTrim(true);
let validator = new LIVR.Validator({});
LIVR.Validator.registerDefaultRules({
nested_object_value() {
return function (value) {
if (!value || (value && !value.value || value === [])) {
return 'REQUIRED';
}
return '';
};
},
max_number_advancement() {
return function (value) {
if (value > 100) {
return 'MAX_NUMBER';
}
return '';
};
},
required_if_activity_present() {
return function (value, allValue) {
if (allValue.activitycycletype && !value || allValue.requestpeople === []) {
console.log(first)
return 'REQUIRED_IF_CYCLETYPE';
}
return '';
};
},
});
And this is how its used:
validationForm = () => {
const { formValue, updateErrors } = this.props;
const validData = validator.validate(formValue);
console.log(formValue)
if (!validData) {
const errorsValidator = validator.getErrors();
if (errorsValidator && Object.keys(errorsValidator).length > 0) {
const newErrors = {};
Object.keys(errorsValidator).forEach((error) => {
newErrors[error] = errorsValidator[error];
});
updateErrors(newErrors);
}
blame(t('validation-error'));
return false;
}
updateErrors({});
return true;
}
Opening the form with this validation in the app, seems to call only the last method required_if_activity_present().
What i expect here is that i can create a new method inside registerDefaultRules(), that is a LIVR method, like this:
LIVR.Validator.registerDefaultRules({
re quired_not_empty() {
return function (value) {
if (!value) {
return 'REQUIRED';
}
return '';
};
},
... //other methods
}
but seems not working, the newer method is not being called at all by validator.validate()
Anyone know how to create a new rules where i can check if an element inside the object that has to be validate is an empty array?
Because seems that LIVR doesn't return a validation error in this case, but only on empty string and null values.
Thanks in advance

Creating a ToDoList, isDone function

I need to create a isDone for my ToDoList and it should return true or false if it's done or not. But if the isDone date is set it should throw an Error since it should be a "read-only". I was thinking something like:
function ToDoItem(isDone) {
let _isDone;
Object.defineProperty(this, 'isDone', {
get: function() {
return _isDone;
}
});
}
But how do I continue so the value returned is true or false?
In my finishedDate I did this:
Object.defineProperty(this, 'finishedDate', {
get: function() {
return _finishedDate;
},
set: function(finishedDate) {
if (finishedDate !== undefined && Object.prototype.toString.call(finishedDate) !== '[object Date]') {
throw new TypeError('invalid date');
}
_finishedDate = finishedDate;
}
});
Thats not a functional function for what you want is it? I would have guess something simple like the following philosophy
function isDone(item) {
return todoList.getItem(item).status;
}

Meteor user updates are very slow

I have a meteor app that allows users to update their skype name, phone number, email address, etc. To help maintain a consistent code base I have implemented an EJSON type UserModel in a common directory so it can run on the client and server.
EJSON.addType("UserModel", function fromJSONValue(value) {
return new UserModel(value);
});
UserModel.prototype = {
constructor: UserModel,
//
// EJSON Ovverrides.
//
valueOf: function() {
return JSON.parse(JSON.stringify(this), function(key, value) {
var dateFields = ["expiration", "createdAt"];
if(_.contains(dateFields, key) && typeof value === "string") {
return new Date(value);
} else {
return value;
}
});
},
typeName: function() {
return 'UserModel';
},
toJSONValue: function() {
return this.valueOf();
},
clone: function() {
return new UserModel(this.valueOf());
},
equals: function(other) {
if(!(other instanceof UserModel)) {
return false;
}
return this._id === other._id;
},
setPhoneNumbers: function(phoneNumber, queueUpdate) {
var modifier = {$set: {
'profile.phoneNumber': phoneNumber
}};
this.profile.phoneNumber = phoneNumber;
return this._saveOrQueueUpdate(modifier, queueUpdate);
},
_saveOrQueueUpdate: function(modifier, queueUpdate) {
if (!queueUpdate) {
return Meteor.users.update(this._id, modifier, function(err, res) {
});
} else {
this.pendingUpdates.push(modifier);
return true;
}
}
I call the setPhoneNumbers method on the settings page js file like so.
'blur #phonenumber':function(){
var user = Meteor.user();
var number = $("#phonenumber").val();
if(number.length){
user.setPhoneNumbers(number);
}
}
The problem with this is that whenever I call the setPhoneNumbers method, the page takes >500ms to update and locks the entire page. I looked at the docs and according to this segment, client code should never be blocking. The page only locks up when updates happen so I know it has something to do with the UserModel. Any insight to what could be causing this would be very helpful. The page is extremely slow and it is unacceptable for a production app.

Titanium Alloy Backbone and ACS

I'm trying to pass data from Appcelerator Cloud Services to Backbone models. I couldn't find documentation on how to do this...
Below is the config from my model file:
exports.definition = {
config: {
"columns": {
"id":"integer",
"address":"text",
"user_completed":"integer"
},
"adapter": {
"type": "", //what can I enter?
"collection_name": "places"
}
},
extendModel : function(Model) {
_.extend(Model.prototype, {
validate : function(attrs) {
for (var key in attrs) {
var value = attrs[key];
if (value) {
if (key === "item") {
if (value.length <= 0) {
return 'Error: No item!';
}
}
if (key === "done") {
if (value.length <= 0) {
return 'Error: No completed flag!';
}
}
}
}
}
});
return Model;
},
extendCollection : function(Collection) {
_.extend(Collection.prototype, {
comparator: function(places) {
return places.get('done');
}
});
return Collection;
}
};
How can I pass data from ACS?
You need to use "acs" in your config.
Check this :
exports.definition = {
config: {
"columns": {
"id":"integer",
"address":"text",
"user_completed":"integer"
},
"adapter": {
"type": "acs", // Use "acs"
"collection_name": "places"
}
},
extendModel : function(Model) {
_.extend(Model.prototype, {
validate : function(attrs) {
for (var key in attrs) {
var value = attrs[key];
if (value) {
if (key === "item") {
if (value.length <= 0) {
return 'Error: No item!';
}
}
if (key === "done") {
if (value.length <= 0) {
return 'Error: No completed flag!';
}
}
}
}
}
});
return Model;
},
extendCollection : function(Collection) {
_.extend(Collection.prototype, {
comparator: function(places) {
return places.get('done');
}
});
return Collection;
}
};
Check this presentation : Titanium presentation under ACS topic with "ACS in Alloy" header.
Also , here is sample example : Alloy backbone & ACS
Hope this helps.

Categories