CODEWITHSUNDEEP
backbone.js
dmackerman
dmackerman

Reputation: 2966

Passing information between Backbone.Views

Preface: I am a Backbone noob. Much of what you see below may be horrid code.

So here's what I have: I'm building a mobile Workout app tracker. I'm using the Junior framework to handle some of the view switching - which could be my issue, but doubtful.

This app has 2 models: app.Workout and app.Exercise. Both are not tied to any database backend, I'm just using localStorage at this point. These models also have 2 collections, ala:

var app = app || {};

(function() {
  'use strict';

  /* collection */
  app.ExercisesCollection = Backbone.Collection.extend({
    model: app.Exercise,
    localStorage: new Backbone.LocalStorage("Exercises")
  });

  /* create the collection */
  app.Exercises = new app.ExercisesCollection();

})();

Great, so now we have the collection.

As you know, there are Workouts. These Workouts have associated Exercises within them. I chose to separate out the 2 models and collections, because I figured it may get too complex otherwise. Maybe I'm wrong?

My View structure is also fairly basic. The flow would go something like:

Home -> 
  Workouts -> 
    (you can add workouts here, or delete)
    Exercises -> 
     (you can add exercises here, or delete)
     Add Exercise

The thing I'm struggling with is how to pass data between these views. For example, I've added a Workout (which works fine, I'm just adding to the collection). Now I've selected that Workout, and want to add Exercises to it. Great, I load up the AddExerciseView, but how does that View know which Workout I want to add the exercise to?

I've tried "passing" some things in the options, but that doesn't seem to be working.

onClickButtonAdd: function() {
  Jr.Navigator.navigate('add-exercise', {
    workoutName: this.workoutName,
    trigger: true,
    animation: {
      type: Jr.Navigator.animations.SLIDE_STACK,
      direction: Jr.Navigator.directions.UP
    }
  });
}

I'm trying to pass workoutName, but that doesn't work.

Am I thinking about this right, or is there a better way to manage views/models (I've heard of Marrionette).

Thanks!

Upvotes: 0

Views: 1447

Answers (1)

Peter Lyons
Peter Lyons

Reputation: 146054

There are 2 common approaches to cleanly connect views.

Pass models to the views as options

In this case you would do something like new AddExerciseView({workout: selectedWorkoutModel}) and that view would gather data from the user, create a new Exercise model instance, and add it to the workout model it got in its initialization options.

Views emit events and router/controller takes it from there

In this version your AddExerciseView would simply gather the data, create a new exercise model instance, then emit an event like create-exercise. Then the view's work is done and it doesn't know nor care what happens to the exercise model instance from then on. In your "glue" code that could live in your router or a dedicated controller object, you bind an event listener to the AddExerciseView instance and when the create-exercise event fires, you add the new exercise model instance to the appropriate workout instance.

Generally, the first option is fine, especially for smaller apps, and the second version only starts to become preferable as your application gets a bit larger and views start being reused in several different contexts.

Upvotes: 2

Related Questions