Marionette js - programmatically find and click an ItemView in a CompositeView

0
votes

I've got a marionette app with a list in it. It's a CompositeView. When a user clicks an item in the list (CompositeView) I apply some css styling to the ItemView to make it appear selected. I do this in the ItemView's click event. Easy enough.

But I also want that list selection to be translated to other browsers viewing the same app. So user selects, let's say, item #3 in browser 1 and that selection is reflected there and also in browser 2 as well.

Problem is there is no click in browser 2.

I'm using SignalR to connect the browsers. The connection is working fine. When item #3 is selected in browser 1, I pass the number 3 over to the other browser.

When I have the 3 over there I don't know what to do with it.

As there is no click in browser 2 I think I have to find the right ItemView and programmatically click it via JQuery .click(). I can't see anything in the marionette js CompositeView docs that gets me the ItemView I'm looking for though. Am I missing something obvious? Is this a bad approach?

UPDATE:

I wound up going with the answer by Selvaraj as I have the need to cover both cases - click and non click (remote). The code for the click case is reused in that answer. But I could make a case for Wilbert's answer as well.

I wound up with a function in my CompositeView that found the right selector and clicked it. The right selector is a parent of my ItemView's el as the only place to set a dynamic ID to latch on to is in the ItemView template which, of course, winds up a child of the ItemView wrapper element. 

    selectItem: function (itemNum) {
        var selector = this.$el.find('#model_' + itemNum).parent();
        selector.click();
    },

Thanks to both for your help.

2
jqueryclicksignalrmarionette

2 Answers

0
votes

Try the following code inside your composite view.

this.$el.find('your-clicked-list-view-selector').trigger('click');
0
votes

I would not use a .click() event in this case. While I'm not familiar with SignalR (a quick glance tells me it's something like socket.io) one way might be the following:

Raise an app event (using Marionette.wreqr for example) when you receive such a message. Have all your itemViews listen to this specific event. When their id's match, apply the class using this.$el.addClass('your-class-name') in your itemView.