I'm having a bit of an issue with a class extending the Backbone.Model.
Using the following class …
class Turtles extends Backbone.Model
idAttribute: "_id"
legs: [0,1,3,5]
urlRoot: '/turtles'
module.exports = Turtles
grunt.js is throwing this error when linting.
[L21:C18] 'Turtles' is already defined.
function Turtles() {
The output of the compile js file looks like this:
(function() {
var Turtles,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Turtles = (function(_super) {
__extends(Turtles, _super);
function Turtles() {
return Turtles.__super__.constructor.apply(this, arguments);
}
Turtles.prototype.idAttribute = "_id";
Turtles.prototype.points = [0, 1, 3, 5];
Turtles.prototype.categories = ['story', 'tech', 'design', 'bug'];
Turtles.prototype.urlRoot = '/cards';
return Turtles;
})(Backbone.Model);
module.exports = Turtles;
}).call(this);
This output is very similar to some views I have extended using class Application extends Backbone.View, so I'm not sure why this model would be failing linting when all my views and collections arent.
That all being said, replacing class Turtles extends Backbone.Model with Turtles = Backbone.Model.extend works find and causes no errors.
Just wondered if anyone has had experience with this before, or perhaps can spot an issue.
Thanks
Related
I want to override "_render: function ()" function from pivot_renderer.js file in web but not working in custom module. Here is the code i am implementing in my custom module:-
odoo.define('MY_CUSTOM_MODULE_NAME.renderer', function (require) {
"use strict";
var PivotRenderer = require('web.PivotRenderer');
var field_utils = require('web.field_utils');
var core = require('web.core');
var _t = core._t;
PivotRenderer.include({
init: function(parent, state, params) {
this._super.apply(this, arguments);
},
_render: function () {
if (!this._hasContent()) {
// display the nocontent helper
this.replaceElement(QWeb.render('PivotView.nodata'));
return this._super.apply(this, arguments);
}
if (!this.$el.is('table')) {
// coming from the no content helper, so the root element has to be
// re-rendered before rendering and appending its content
this.renderElement();
}
var $fragment = $(document.createDocumentFragment());
var $table = $('<table>').appendTo($fragment);
var $thead = $('<thead>').appendTo($table).addClass("CLASS_NAME");
var $tbody = $('<tbody>').appendTo($table);
var nbr_measures = this.state.measures.length;
var nbrCols = (this.state.mainColWidth === 1) ?
nbr_measures :
(this.state.mainColWidth + 1) * nbr_measures;
for (var i=0; i < nbrCols + 1; i++) {
$table.prepend($('<col>'));
}
this._renderHeaders($thead, this.state.headers);
this._renderRows($tbody, this.state.rows);
// todo: make sure the next line does something
$table.find('.o_pivot_header_cell_opened,.o_pivot_header_cell_closed').tooltip();
this.$el.html($table.contents());
return this._super.apply(this, arguments);
},
});
});
In the above, i want to add a class in the header for calling my custom css "var $thead = $('').appendTo($table).addClass("CLASS_NAME");" with this syntax but it is not reflecting in my custom module. Although, for testing, I have implemented same class in default web module and it is working fine. The issue is in custom module.
So how to solve this issue? Is there any other way for calling class or i am doing it in a wrong way?
var $thead = $('').addClass("CLASS_NAME").appendTo($table);
This will work in my case. You can try it.
I'm having an issue with some code I wrote that's utterly stumped me.
The main JSX tutorial available at the JSX Github Page has an example class called Point, which looks like:
class Point {
var x = 0;
var y = 0;
function constructor() {
}
function constructor(x : number, y : number) {
this.set(x, y);
}
function constructor(other : Point) {
this.set(other);
}
function set(x : number, y : number) : void {
this.x = x;
this.y = y;
}
function set(other : Point) : void {
this.set(other.x, other.y);
}
}
That class has a clear example of a multiple constructor types which I'm familiar from my C++ days. It even has a defined copy constructor, which I think is great.
However, if I got and create a similar class for use by me:
export default class MutableDataStore {
constructor() {
this.data = [];
this.settings = {};
}
//Copy constructor
constructor(other : MutableDataStore) {
this.data = other.data.slice();
this.settings = Object.assign({}, this.settings);
}
//...Other functions omitted
}
I get the following error in my webpack build:
ERROR in ./src/stores/helper-classes/mutabledatastore.jsx
Module build failed: SyntaxError: Duplicate constructor in the same class (8:1)
I'm completely stumped by this, since I can't find anything similar on the web about this, unless it seems to be a transient issue.
My webpack.config.js is:
var webpack = require("webpack");
var path = require("path");
var src = path.resolve(__dirname, "src");
var app = path.resolve(__dirname, "app");
var config = {
entry: src + "/index.jsx",
output: {
path: app,
filename: "javascript.js"
},
module: {
loaders: [{
include: src,
loader: "babel-loader"
}]
}
};
module.exports = config;
and my babel presets are es2015 and react.
Any help would be appreciated!
As loganfsmyth said in the comments, there can only be one constructor in an ES6 class. You can get the desired effect by either checking if other is set in the construct or by providing a default value for the parameter
export default class MutableDataStore {
constructor(other : MutableDataStore) {
this.data = other ? other.data.slice() : [];
this.settings = other ? Object.assign({}, other.settings) : {};
}
//...Other functions omitted
}
// or
export default class MutableDataStore {
constructor(other : MutableDataStore = { data: [], settings: {} }) {
this.data = other.data.slice();
this.settings = Object.assign({}, other.settings);
}
//...Other functions omitted
}
As a side not, I think you might have intended the copy constructor to copy the settings from other, not this.
I'm writing my angular app in typescript.
For sake of redundancy prevention I would like to accomplish some type of generic handling.
This is where I'm coming from:
class BaseProvider {
api_url = 'http://localhost:80/api/FILL_OUT_PATH/:id';
$get($resource){
var provider = $resource(this.api_url, {}, {
update: {
method: 'PUT'
}
});
return provider;
}
}
and
class User extends BaseProvider{
constructor() {
super();
this.api_url = 'http://localhost:80/api/users/:id';
}
}
then
module Controllers
{
export class BaseController {
message = "Base controller";
entity : any;
entities : any;
constructor($scope)
{
}
}
}
and
module Controllers
{
export class UserController extends BaseController {
name = "UserController";
constructor($scope, User)
{
super($scope);
this.entity = new User();
this.entities = User.query();
$scope.vm = this;
}
}
}
This is where I'd like to go with UserController (P-Code):
module Controllers
{
export class UserController<T extends BaseProvider> extends BaseController {
name = "UserController";
static $inject = ['$scope', T.typename]; // Inject the types name somehow?
constructor($scope, entity)
{
super($scope);
this.entity = new T();
this.entities = T.query();
$scope.user = this;
}
}
Is there a facility in typescript to handle this?
Is there a facility in typescript to handle this?
No. All type information is erased from the generated JS so you cannot use generic parameters as variables.
There is no way to do it with generics since there will be no typing related information at the runtime, but as a workaround you can pass the type via constructor and type safety with generics. The following code compiles without error and shows how it could be accomplished.
class C1 {
m() { }
}
class C2 extends C1 { }
class C<T extends C1> {
constructor(t: { new (): C1 }) {
var instance = new t();
}
}
new C(C2);
I learn typescript and angularjs for a few days,and now I have a question that confuses me for days, I want to make a gps tracking system, so I try to write a service like this:
1.
module Services {
export class MyService {
getGpsPeople(): Array<AppCommon.GPSPerson> {
var gpsPeople = new Array<AppCommon.GPSPerson>()
for (var i = 0; i < 10; i++) {
var tempPerson = new AppCommon.GPSPerson({ name: "username" + i.toString() });
gpsPeople.push(tempPerson);
}
return gpsPeople;
}
} // MyService class
}
A controller like this:
module AppCommon {
export class Controller {
scope: ng.IScope;
constructor($scope: ng.IScope) {
this.scope = $scope;
}
}
}
module Controllers {
export interface IMyScope extends ng.IScope {
gpsPeople: Array<AppCommon.GPSPerson>;
}
export class MyController extends AppCommon.Controller {
scope: IMyScope;
static $inject = ['$scope','myService'];
constructor($scope: IMyScope,service:Services.MyService) {
super($scope);
$scope.gpsPeople = service.getGpsPeople();
}
}
}
3.The GPSPerson class like this:
export class GPSPoint {
latitude = 0;
longtitude = 0;
constructor(la: number, lg: number) {
this.latitude = la;
this.longtitude = lg;
}
}
export interface IPerson {
name: string;
}
export class GPSPerson
{
name: string;
lastLocation: GPSPoint;
countFlag = 1;
historyLocations: Array<GPSPoint>;
timerToken: number;
startTracking() {
this.timerToken = setInterval(
() => {
var newGpsPoint = null;
var offside = Math.random();
if (this.countFlag % 2 == 0) {
newGpsPoint = new GPSPoint(this.lastLocation.latitude - offside, this.lastLocation.longtitude - offside);
}
else {
newGpsPoint = new GPSPoint(this.lastLocation.latitude + offside, this.lastLocation.longtitude + offside);
}
this.lastLocation = newGpsPoint;
this.historyLocations.push(newGpsPoint);
console.log(this.countFlag.toString() + "+++++++++++++++++++" + this.lastLocation.latitude.toString() + "----" + this.lastLocation.longtitude.toString());
this.countFlag++;
}
, 10000);
}
stopTracking() {
clearTimeout(this.timerToken);
}
constructor(data: IPerson) {
this.name = data.name;
this.lastLocation = new GPSPoint(123.2, 118.49);
this.historyLocations = new Array<GPSPoint>();
}
}
The problem is:
1.Should I make the GPSPerson class a Controller?
2.The setinterval works but the UI dose not change(when I hit button ,it changes,the button do nothing )?
I'm a beginner of ts and angular,and have no experience with js, I do not know if I have explained it clearly, hope someone can help me, thanks!
setInterval works but the ui dose not change
This is because the angular $digest loop does not run on completion of setInterval. You should use $interval service https://docs.angularjs.org/api/ng/service/$interval as that tells Angular to do its dirty checking again.
You just need to provide MyService access to $interval though. Inject it using $inject (see https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1).
1.should i make the GPSPerson class a Controller?
No. Its an array of JavaScript objects inside the controller and that is fine.
I would separate the tracking logic and keep just the data in GPSPerson. For the tracking logic I would make a factory.
My examples are not in Typescript but I'm sure you will have no problem in converting the code if you want.
This is a link to a Plunk
I've made a much simpler example but I think you'll understand the idea.
The factory would have two methods for start and stop tracking. They will take a person as parameter.
app.factory('tracking',function($interval){
var trackingInterval;
var trackingFn = function(person){
var currentPos = Math.floor(Math.random()*10);
var newPosition = {id:person.positions.length, position:currentPos};
person.positions.push(newPosition);
};
var startTracking = function(person){
person.interval = $interval(function(){
trackingFn(person);
},2000);
};
var stopTracking = function(person){
console.log('STOP');
$interval.cancel(person.interval);
};
var getNewTrack = function(){
};
return {
startTracking: startTracking,
stopTracking: stopTracking,
};
});
I've also made a very simple directive to show the data
app.directive('position',function(){
return {
templateUrl: 'positionTemplate.html',
link: function(scope, element,attrs){
}
}
});
and the template look like this
<div>
<button ng-click="startTracking(person)">Start tracking</button>
<button ng-click="stopTracking(person)">Stop tracking</button>
<p>{{person.name}}</p>
<ul>
<li ng-repeat="pos in person.positions">{{pos.position}}</li>
</ul>
</div>
And the directive would be called this way
<div ng-repeat="person in people">
<div position></div>
</div>
I'm not saying that this is a better solution but that is how I would do it. Remember it is just a model and needs a lot of improvement.
I use ExtJs 4.1 and DeftJs.
Some class is defined with a constructor like that:
Ext.define( 'A.helper.Report', {
config: {
conf : null,
viewMain : null
},
constructor: function( oConfig ) {
this.conf = oConfig.conf;
this.viewMain = oConfig.viewMain;
this.initConfig( oConfig );
}
...
Now, I create several instances of this class like that:
var class1 = Ext.create( 'A.helper.Report', {
conf: someValue,
viewMain: someObject
} );
var class2 = Ext.create( 'A.helper.Report', {
conf: otherValue,
viewMain: otherObject
} );
When using these instances, although giving them different oConfig data, both class1 and class2 now have the data of the 2nd oConfig.
So when calling this.conf in both instances, I get someValue.
How can I keep the data of already created instances?
Solution:
I wrote
Ext.define( 'A.helper.Report', {
...
references: {}
...
and put my instances in there, overriding old instances.
Switched to references: null helped.
...
Be careful to not messing around with prototype objects...
Rewritten answer
You are doing it the wrong way.
See this working JSFiddle
Ext.define('A.helper.Report', {
config: {
conf : null,
viewMain : null
},
constructor: function(cfg) {
this.initConfig(cfg);
}
});
var class1 = Ext.create('A.helper.Report',{
conf: 66,
viewMain: 'Bear'
});
var class2 = Ext.create('A.helper.Report',{
conf: 88,
viewMain: 'Eagle'
});
class1.getConf(); // 66
class1.getViewMain(); // Bear
class2.getConf(); // 88
class2.getViewMain(); // Eagle