Correct Way To Have Multiple App Instances Side By Side

Design
1

Lets say that I made a todo-list application, and I want three separate todo-lists side my side on screen. How should I go about this?

Eg. David’s Todos, Jack’s Todos, and Mindy’s Todos

All will have the same interface and features, but will have their own todo list. For instance, they have a heading that contains the name of the list, a add todo button which ads a todo item to the list of todos. You click a pencil icon next to any todo item and it enters an edit mode, where you can change the todos text.

I was thinking that creating a component called “todo-app” in which I would be able to pass a title for the list, and the component handles all of the actions as well as adding new todo items.

Am I sort of on the right track? Mind you, I am still relatively new to ember.js, but I understand a lot of programming theory and what not.

Any help or thoughts would be appreciated! :smiley:

2

Curious why do you want to do this? Why not three collections powering three different lists? Are you actually asking “how to implement multi tenant”?

3

I suppose it could be considered Multitenancy, but basically I want to be able to render three of the same templates and pass a context to it because the todos are stored in my databse in one table

eg.

Id | Title | Todo | Date_Created | Last_Updated | Context

The context field would contain “David, Jack, or Mindy” depending on which context it was created in.

4

So roughly this?

{{#each person in people}}
{{view App.TodoList content=person.todos}}
{{/each}}

If you need a separate controller for each todo list (unlikely) you can use the render helper instead of the view helper.

5

yeah, something like that.

Would I just have a template that has

data-template-name="todo-list"
6

You could, (the view name would be App.TodoListView in that case.

Alternatively you could write an ember view which would let you handle some of the todo list logic and events.

App.TodoList = Ember.View.extend({ templateName : 'todo-list', tagName : 'ul' })

7

How exactly do I handle the events within the views. Is the isEditing handled by the controller that contains the {{view App.TodoList content=App.Todos}}?

{{#each view.content}}
   {{#if isEditing}}
       {{input type="text" value="todo"}}
   {{else}}
       {{id}}
       {{todo}}
   {{/if}
{{/each}}
8

Within an action helper {{action 'saveTodo' target="view"}}

Also : Ember - 4.6 - Ember API Documentation

Alternatively:

App.ToDoList = Ember.view.extend({
    mouseDown : function (3) {
        if (e.keyCode === 13) {
            this.triggerAction({ action : 'saveToDo', context : get(this, 'content'),bubbles : false });
        }
    }
});
9

Here is what I ended up doing:

{{#with controller.marketingNotes}}
    {{view App.NoteListView}}
{{/with}}

App.NotesController = Ember.ArrayController.extend({
marketingNotes: function() {
	var notes = this.filterBy('assignment', 'marketing');
	return notes;
}.property('@each.assignment'),

salesNotes: function() {
	var notes = this.filterBy('assignment', 'sales');
	return notes;
}.property('@each.assignment'),

developmentNotes: function() {
	var notes = this.filterBy('assignment', 'development');
	return notes;
}.property('@each.assignment'),

actions: {
	create: function(context){
		var note = this.store.createRecord('note', {assignment: context});
		note.save();
	}
}
});