Re: [Backbone.Marionette] Pattern to render a grouping of rows

[Derick Bailey]

Hi Joe,

A CollectionView or CompositeView would do this easily, with an itemView that renders a "row-fluid" for each item in the collection.

  -- Derick

On Friday, August 17, 2012 at 12:11 PM, Joe Gornick wrote:

Hi!

I'm trying to find a pattern that takes a collection of data and produces rows with 3 items in each row. My domain is I'm working with is a Unit that has many Measurements. I need to render those Measurements as a small widget to display the measurement name and last value recorded.

An example of markup would be something like:

<div class="measurements-grid">

  <div class="row-fluid">

    <!-- 3 measurements per row -->    

    <div class="span4 thumbnail measurement">

      <span class="name">{{ measurement.name }}</span>

      <span class="value">{{ value }}</span>

      <div class="graph"></div>

    </div>

  </div>

  <!-- 12 total measurements would be 4 rows -->

</div>

Any help would be greatly appreciated!

Thanks!

 - Joe

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To post to this group, send email to backbone-...@googlegroups.com.
To unsubscribe from this group, send email to backbone-marion...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/b9BR-75BBBkJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Joe Gornick]

Hey Derick,

Ok, that makes sense, but how would you setup the rendering process to create a new ItemView that represents a row for every 3 measurements? Would you have to create a custom collection that has the measurements grouped?

Thanks!

 - Joe

To unsubscribe from this group, send email to backbone-marionette+unsub...@googlegroups.com.

To unsubscribe from this group, send email to backbone-marionette+unsub...@googlegroups.com.

To unsubscribe from this group, send email to backbone-marionette+unsub...@googlegroups.com.

[Derick Bailey]

The measurement data should be returned from your server already grouped, so that each model is 1 group of 3 measurements.

IMO, Backbone models are view-models, not relational models. They are meant to be tailored to the specific screens that they are used on. You don't want to do grouping, filtering and other relational functions on the browser if you don't have to. 

  -- Derick

To unsubscribe from this group, send email to backbone-marion...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/RZyqsp_D94AJ.

[Robert Levy]

If you can't change the service for some reason, implementing a 'parse' function on your Model is a good way to restructure the data into a more suitable viewmodel

---

From: Derick Bailey
Sent: 8/18/2012 1:13 PM
To: backbone-...@googlegroups.com
Subject: Re: [Backbone.Marionette] Pattern to render a grouping of rows

[Joe Gornick]

Sounds good! Thanks Derick and Robert!

To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/RZyqsp_D94AJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To post to this group, send email to backbone-...@googlegroups.com.

To unsubscribe from this group, send email to backbone-marionette+unsub...@googlegroups.com.

[Ruben Vreeken]

You could override the appendHTML method on your compositeView to append the rendered itemViews to the compositeView and insert new rows as needed.
Not sure if that's the cleanest way to do it because you'll be moving some markup out of the template and into the view, but at least it's dead simple and doesn't require you to either modify your collections or keep separate collections of the same data due to multiple views with different needs.

On Fri, Nov 16, 2012 at 4:35 PM, Bryan Buchs <buchs...@gmail.com> wrote:

The measurement data should be returned from your server already grouped, so that each model is 1 group of 3 measurements.
IMO, Backbone models are view-models, not relational models. They are meant to be tailored to the specific screens that they are used on. You don't want to do grouping, filtering and other relational functions on the browser if you don't have to. 

What if I have one collection that should be used with multiple views?

As an example: a photo gallery with an index view in a "grid" layout, and a modal overlay layout that contains an item detail view and a list of those same thumbs in a single row. It seems wasteful to fetch the collection from the server twice. Where would be the most appropriate method to reformat the response?

To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/RZyqsp_D94AJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To post to this group, send email to backbone-...@googlegroups.com.
To unsubscribe from this group, send email to backbone-marion...@googlegroups.com.

Visit this group at http://groups.google.com/group/backbone-marionette?hl=en.
To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/DnrKMkEV3-UJ.

[Bryan Buchs]

I took another stab at this, and here's what I came up with:

http://jsfiddle.net/bryanbuchs/c72Vg/

I've been working with Backbone for all of 2 weeks, and Marionette for about 4 days... so while this might work, I'm sure it could use some work. In short: The "grid" CompositeView manipulates the collection during initialize, grouping it into rows of 4 before the "row" and "item" views are run. 

What I couldn't figure out was how to pass the grouped data from the grid to the row as something I could grab easily. What I ended up doing was to dump the data into new generic Collection objects. If anyone has suggestions on how to clean this up, I'm all ears.

-- Bryan

To unsubscribe from this group, send email to backbone-marionette+unsubscribe...@googlegroups.com.

To unsubscribe from this group, send email to backbone-marionette+unsubscribe...@googlegroups.com.

To unsubscribe from this group, send email to backbone-marionette+unsubscribe...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/b9BR-75BBBkJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To post to this group, send email to backbone-...@googlegroups.com.

To unsubscribe from this group, send email to backbone-marionette+unsubscribe...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/RZyqsp_D94AJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To post to this group, send email to backbone-...@googlegroups.com.

To unsubscribe from this group, send email to backbone-marionette+unsub...@googlegroups.com.