How to share collection

[vtsurka]

If i have one collection that uses many widgets, how correctly share this collection.

Sample:

Task menu (Wdiget?):

Review
In Progress
Done

Task list(Widget)
#1 Task name
#2 Task name
#3 Task name

Detailed view(Widget)

• Task name
• Description
• created at

When in task list i click on "#2 Task name", i must render detailed view widget.
How correctly organize this code.

Thx.

[dustinboston]

@vtsurka You would call publish with some extra data:

// task list
sandbox.publish('task', 'detail', id);

// task detail
sandbox.subscribe('task', 'detail', function (caller, id) {
  // Do things with id
});

If you check out the console when you run Aura you will see a bunch of messages like "Todos-bootstrap message from from: controls". Each of those messages are being published from one widget and subscribed by another widget. You just have to add the additional data to the call.

[dustinboston]

@addyosmani I'd like to add another button to the controls that publishes extra data. If you agree, I'll commit.

[addyosmani]

Fully agree. Feel free to :)

[dustinboston]

Done.

[vtsurka]

I expected send the id of model, but we have model 'Task' they use in widgets: TaskList, TaskDetailed.
Where i must store this model if they uses in both widgets.

I don't want duplicate model ;(

[vtsurka]

I need generate page like this

When i click on link expand, will show detailed todo under row.

So i have todos(as like demo app) i add method show /widgets/views/todos.js

        events: {
                        //... other events
            'click .view': 'show',
        },

        //Show detailed info about task
        show: function() {
            sandbox.widgets.start('detailed',this.$el);
            sandbox.widgets.publish('todo-detailed',this.model);
        },

And i create widget detailed

Widget main.js

define(['sandbox', './views/app'], function (sandbox, AppView) {

    return function (element) {
        var view = new AppView({
            el: sandbox.dom.find(element)
        });     
               return view;

        sandbox.subscribe('todo-detailed', 'detailed', function (todo) {
            //apply model
            view.model = todo;          

        });
    };

});

View

define(['sandbox', 'text!../templates/detailed.html'], function (sandbox, template) {

    var AppView = sandbox.mvc.View({

        template: sandbox.template.parse(template),


        events: {
            'click .save': 'save',
            'click .start': 'start',
            'click .stop': 'stop'
        },
        // At initialization we bind to the relevant events on the `Todos`
        // collection, when items are added or changed. Kick things off by
        // loading any preexisting todos that might be saved in *localStorage*.
        initialize: function () {
            sandbox.widgets.start('todo-history','#todo-history');
            sandbox.widgets.start('todo-comment','#todo-comment');
        },

        render: function() {            
            this.$el.html(this.template(this.model.toJSON()));
        }

    });

    return AppView;

});

Is it right way to organize widget like this?