I have a very simple Backbone.JS app developed, for learning CoffeeScript + Backbone.JS:
class Todo extends Backbone.Model
defaults:
title: ''
priority: 0
done: false
class Todo extends Backbone.Collection
model: Todo
localStorage: new Backbone.LocalStorage("Todos")
t = new Todo({ title: 'todo 1' })
console.log t
But I am getting (looks very much like an infinite loop)
<error>
b.extend
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
f.extend.add
f.extend.reset
g.Collection
Todo
f.extend._prepareModel
With normal JS I define class and inheritance like
Todo = Backbone.Model.extend({})
But in CoffeeScript its
class Todo extends Backbone.Model
are they the same? I dont think so, is this the cause of the problem?
You have a typo in your collection, you want to call it Todos, not Todo:
class Todos extends Backbone.Collection
model: Todo
localStorage: new Backbone.LocalStorage("Todos")
If I do this:
class Todo extends Backbone.Model
class Todo extends Backbone.Collection
model: Todo
t = new Todo(title: 'todo 1')
console.log tâââ
I get a "Maximum call stack size exceeded." error: http://jsfiddle.net/ambiguous/FTCr2/
But if the collection is called Todos, things work: http://jsfiddle.net/ambiguous/RrA2D/
Your problem seems to be that your collection's model property is the collection itself so you end up with infinite recursion as the collection tries to create a model which is actually the collection ...
Related
I'm learning React and Typescript by writing a solitaire card game.
From the Immutable docs for List: Create a new immutable List containing the values of the provided collection-like. List<T>(): List<T>
I see lots of examples for extending Map, etc., but cannot find how to use a List of objects with Typescript.
How do I declare the type in the interface, and how do I create a list in the state?
import React from 'react';
import './Game.scss';
import Card from '../card/Card'
const { List } = require('immutable');
interface IState {
deck: List<Card>; // Doesn't compile... "typeof List" does compile, but isn't typesafe?
}
class Game extends React.Component {
readonly state = {
deck: List<Card>() // Also doesn't compile... "List()" does compile, but isn't typesafe?
}
render () {
return ...
}
}
The error is:
TypeScript error in /Volumes/User/dev/games/spider/src/modules/game/Game.tsx(24,9):
'List' refers to a value, but is being used as a type here. Did you mean 'typeof List'? TS2749
> 24 | deck: List<Card>;
| ^
25 | }
From https://github.com/Microsoft/TypeScript/issues/1634, the problem is that the Immutable library must be imported, not merely required.
import React from 'react';
import { List } from 'immutable';
import './Game.scss';
import Card from '../card/Card'
interface IState {
deck: List<typeof Card>;
}
class Game extends React.Component {
readonly state: IState = {
deck: List<typeof Card>(),
};
I have a simple React class annotated with a MobX #observer annotation and a simple data structure (annotated with #observable data = { .. }. An action updates this structure but does render.
Here is source code of the class: -
import React, {Component, Fragment} from 'react';
import {observer} from "mobx-react";
import {observable} from "mobx";
import {withRouter} from 'react-router-dom';
#observer
#withRouter
class UpdateDetailsForm extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
#observable data = {
error: ""
};
onClick () {
this.data.error = "error has occurred";
console.log("Something has happened!"); // testing purposes
}
render() {
return (
<div>
<div className="red">[ {this.data.error} ]</div>
<input type="button" value="Click Me!" onClick={this.onClick} />
</div>
);
}
}
However, when I click the button the console displays ...
Something has happened!
... which proves the state of data is mutated but the HTML doesn't update.
Just figured it out! It was the order of the class annotations is important i.e.
#withRouter
#observer
class UpdateDetailsForm extends Component {
...
This works!
But when #withRouter is the closest annotation to class UpdateDetailsForm it fails.
Also found this in MobX docs - https://mobx.js.org/best/pitfalls.html
_#inject('store') before #observer will cause MobX to not trigger_
So the same thing happens for the #inject annotation.
Just check out your mobx version. Before mobx version 6, this will work. From version 6, you need an extra makeObservable(this) in the constructor.
This is the official thread.
MobX before version 6 did not require the makeObservable(this) call in the constructor, but because it makes the implementation of decorator simpler and more compatible, it now does. This instructs MobX to make the instances observable following the information in the decorators -- the decorators take the place of the second argument to makeObservable.
I am a starter to React and mobx. Based on my design, data should be updated after click the button using observer, observable modules. Even though the console log displays the email changed whenever clicking the button, the view doesn't change at all. Could you give me any advice?
import Link from 'next/link';
import React, { useState } from 'react';
import ProfileImage from '../components/ProfileImage';
import faker from 'faker';
import { decorate, observable } from 'mobx';
import { observer } from "mobx-react"
class Data {
avartar = faker.image.avatar();
email = faker.internet.email();
name = {
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
};
}
decorate(Data, {
avartar: observable,
email: observable,
name: observable,
})
class Index extends React.Component {
data = new Data();
generate = () => {
this.data.email = faker.internet.email();
this.data.name.firstName = faker.name.firstName();
this.data.avartar = faker.image.avatar();
console.log("check: ", this.data.email);
}
render() {
return (
<>
<h1>Index</h1>
<button className="btn btn-primary" onClick={this.generate}>Change</button>
<div>
<dl className="row">
<dt className="col-sm-3">Avatar</dt>
<dd className="col-sm-9"><img src={this.data.avartar} /></dd>
<dt className="col-sm-3">Name</dt>
<dd className="col-sm-9">{this.data.name.firstName} {this.data.name.lastName}</dd>
<dt className="col-sm-3">Email</dt>
<dd className="col-sm-9">{this.data.email}</dd>
</dl>
</div>
</>);
}
}
Index = observer(Index);
export default Index;
You need to also decorate the Index.data property with #observable.
#observer
class Index extends React.Component {
#observable data = new Data();
}
// Or non-decorator syntax:
Index = observer(decorate(Index, { data: observable }));
I'm new to react and i've been learning how to solve this error by Accessing properties of a component class to another component class.
import React, { Component } from 'react';
import People from './Properties/People';
import './App.css';
class App extends Component {
// Here I'm trying to access props from People component and print it out.
<div className='one'>
<h1> Bunch of People </h1>
<p> The name is {this.state.Names[1].Person2} </p>
<p> The name is {this.state.Names[2].Person3} </p>
<p> The name is {this.state.Names[0].Person1} </p>
</div>
);
}
}
export default App;
./Properties/People
import { Component } from 'react';
class People extends Component{
constructor(){
super();
this.state = {
Names: [
{ Person1: 'Hetch' },
{ Person2: 'Danny' },
{ Person3: 'Willy' },
{ Person4: 'Tiget' },
{ Person5: 'Leclerc'},
{ Person6: 'Zoel' }]
}}
}
export default People;
Compiled with warnings.
./src/App.js
Line 2: 'People' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
The way react shares data between components is by props , which is an object.
So you need to call your App component inside your People component and pass the state as props.
Try this inside your people component
<App people={this.state.Names} />
And call this.props.people inside your App component and you will get the Names
more info: https://reactjs.org/docs/components-and-props.html
Hope this help!
I am trying to use React and blueprint with tsx files
import * as React from 'react';
import { Button } from "#blueprintjs/core"
class App extends React.Component {
render() {
return <Button intent="success" text="button content" />
}
}
export default App;
The file is named as App.tsx. It throws error as:
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
(alias) class Button
import Button
What is wrong with this code?
you should define a props and state from App(you could simply pass {})
export class App extends React.Component<{}, {}> { }
using <App />
Or you want to define your props
export class App extends React.Component<{ name: string, age: number }, {}> { }
using <App name="Join" age="22" />
Note these are object type not value.
To tell thar App will be able to recieve a props with name, age