1

I'm trying to create simple ToDo app using Ractive.js and Redux, but I ran into a problem with rendering more than one component on my page.

Javascript code:

import Ractive from 'ractive';
import template from './Home.html';
import './Home.less';

import { AddToDoForm, ToDoList } from '../';

export default Ractive.extend({
  template,
  data: {
    message: 'This is the home page.',
  },
  components: {
    AddToDoForm,
    ToDoList
  }
});

HTML of the component:

<AddToDoForm store={{store}} />
<ToDoList store={{store}} />

But only the first component is rendered. The store parameter I'm passing is the Redux store, but it doesn't work even without it.

Dominik Havlicek
  • 63
  • 1
  • 5
  • Just by looking at the code, nothing stands out. But there are a few vague spots, like how is `Home.html` and `Home.less` transformed, how `AddToDoForm` and `ToDoList` is imported, where does `store` come from. Might be better if you provided a demo, or explained how the other parts come in. Also, a console error (if any) would be beneficial. And mentioning tooling would be great. – Joseph Aug 17 '17 at 16:49
  • You might also want to check if `ToDoList` is actually a component definition. When Ractive does not recognize a component, it usually renders the tag as is and empty on the DOM (which appears as nothing). If `` appears as ``, then that may be the case. – Joseph Aug 17 '17 at 17:14
  • @Joseph I use Webpack for everything. Store comes from the root app component, where it is initialized. Demo would imo be hard to provide to account for everything in this case, but I can try tomorrow when I'm at the PC the code is. I'll check the import of `ToDoList` tomorrow too, maybe you're onto something there. – Dominik Havlicek Aug 17 '17 at 18:21

1 Answers1

0

I would add to verify defaults as a 

...
components:{
    AddToDoForm: AddToDoForm,
    ToDoList: ToDoList
}
...

syntax examples (answer/31096635)

nolochemical
  • 1
  • 1
  • 2