javascript - How to redefine object and communicate object?

Question

I faced some problems, I know var app = app || {} means creating variable app is empty object then app is used through redefining activity.

But i don't understand how to use the empty object in backbone like above method.

Router.js

 var app = app || {};
(function() {
    'use strict';
    var views = app.view = app.view || {};
    app.Router = Backbone.Router.extend({
        routes: {
            'list/:id': 'listRoute',
            'situation': 'situationRoute',
            'culture': 'cultureRoute',
            'level': 'livingwordsRoute',
            //wildcard place on last.
            '*home': 'homeRoute'
        },
        _bindRoutes: function() {
          if (!this.routes) return;
          this.routes = _.result(this, 'routes');
          var route, routes = _.keys(this.routes);
          while ((route = routes.pop()) != null) {
            this.route(route, this.routes[route]);
          }
        },
        initialize: function() {
            // create the layout once here
            this.layout = new views.Application({
                el: 'body',
            });
        },
        homeRoute: function() {
            var view = new views.Home();
            var target = 'home';
            this.layout.setContent(view, target);
        },
        situationRoute: function() {
            var view = new views.Situation();
            var target = 'situation';
            this.layout.setContent(view, target);
        },
        listRoute: function(id) {
            switch (id) {
              case 1:
                var list = new app.collection([
                    {
                      id : "1",
                      url : "/assets/videos/call/MOV01718.mp4",
                      imgSrc : "assets/img/call/1_thumbnail.png",
                      title: "call situation conservation"
                    },
                    {
                      id : "2",
                      url : "/assets/videos/call/MOV01722.mp4",
                      imgSrc : "assets/img/call/2_thumbnail.png",
                      title: "call situation conservation"
                    }
                  ]);
                break;
              default:
              var list = new app.collection([
                  {
                    id : "1",
                    url : "/assets/videos/call/MOV01718.mp4",
                    imgSrc : "assets/img/call/1_thumbnail.png",
                    title: "call situation conservation"
                  },
                  {
                    id : "2",
                    url : "/assets/videos/call/MOV01722.mp4",
                    imgSrc : "assets/img/call/2_thumbnail.png",
                    title: "call situation conservation"
                  }
                ]);
            }
            var view = new views.list();
            var target = 'list';
            this.layout.setContent(view, target);
        },
        cultureRoute: function(){
            var view = new views.Culture();
            var target = 'culture';
            this.layout.setContent(view, target);
        },
        livingwordsRoute: function(){
            var view = new views.Level();
            var target = 'livingwords';
            this.layout.setContent(view, target);
        }
      });
      var router = new app.Router();
      Backbone.history.start();
})();

VideoList.js

    var app = app || {};
(function() {
    'use strict';
    var models = app.model = app.model || {};
    var collections = app.collection = app.collection || {};
    models.Video = Backbone.Model.extend({
        initialize: function(){
            console.log('model create');
        },
        defaults:{
                 id : "1",
                 url : "/assets/videos/call/MOV01718.mp4",
                 imgSrc : "assets/img/call/1_thumbnail.png",
                 title: "call situation conservation"
        }
    });
    collections.VideoLists =  Backbone.Collection.extend({
        model: models.Video
    });
    var lists = new collections.VideoLists([
        {
            id : "1",
            url : "/assets/videos/call/MOV01718.mp4",
            imgSrc : "assets/img/call/1_thumbnail.png",
            title: "call situation conservation"
        },
        {
            id : "2",
            url : "/assets/videos/call/MOV01722.mp4",
            imgSrc : "assets/img/call/2_thumbnail.png",
            title: "call situation conservation"
        }
    ]);
    console.log(lists);
})();

view.js

    var app = app || {};
(function() {
    'use strict';
    //views linitalize
    var views = app.view = app.view || {};
    views.Application = Backbone.View.extend({
        initialize: function() {
           this.$content = this.$('#main');
            //this.$loading = this.$('#loading');
        },
        setContent: function(view, target) {
            var content = this.content;
            var subUrl = this.target;

            if (content) content.remove();

            content = this.content = view;
            subUrl = this.target = target;

            var templateName = subUrl;
            var tmpl_dir = '../assets/static';
            var tmpl_url = tmpl_dir + '/' + templateName + '.html';
            var tmpl_string = '';

            $.ajax({
                url: tmpl_url,
                method: 'GET',
                async: false,
                dataType : 'html',
                success: function (data) {
                    tmpl_string = data;
                }
            });
            this.$content.html(content.render(tmpl_string).el);
        }
    });
    views.Home = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
        //how to get return result? in parent object?
    });
    views.Situation = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.list = Backbone.View.extend({
      initialize: function(){
        this.collection = new app.collection();
      },
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Culture = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Level = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
})();

list.html

  <script type="text/template" id="list-template">
      <div class="content">
        <a href="<%= list.url %>"></a>
        <figure id="<%= list.id %>">
          <img src="<%= list.imgSrc %>" alt="">
          <figcaption><%= list.title%></figcaption>
        </figure>
      </div>
      </script> 

This is my source.

i want to communicate between Router and View because i don't understand why indicate

app.collcetion is not constructor

and then, i tested in the videolist.js

var lists = new collections.VideoLists([
        {
            id : "1",
            url : "/assets/videos/call/MOV01718.mp4",
            imgSrc : "assets/img/call/1_thumbnail.png",
            title: "call situation conservation"
        },
        {
            id : "2",
            url : "/assets/videos/call/MOV01722.mp4",
            imgSrc : "assets/img/call/2_thumbnail.png",
            title: "call situation conservation"
        }
    ]);

is great generated. (in the videoList.js) see the below screentshot.

and i want to know how to refactor repeated code.

please refer to my below source
router.js

views.Home = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
        //how to get return result? in parent object?
    });
    views.Situation = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.list = Backbone.View.extend({
      initialize: function(){
        this.collection = new app.collection();
      },
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Culture = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Level = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });

view.js

 views.Home = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Situation = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });

I don't want to repeat same object and source.

How can I change them?

Answer 1

The var app = app || {}; technique is just a namespacing pattern to avoid polluting the global namespace.

More details on this namespacing pattern

A single global variable named app is created, then the code for the app is added to it. When splitting the app in multiple files, you want to be able to use the app variable if it was defined previously.

Enters the app || {} trick which will return the app variable if it's truthy or the {} empty object if app is falsy (probably undefined).

Though this technique enables different ordering of the files, if a file requires another component (like app.collection), the files should be ordered accordingly.

<script src="collections.js"></script><!-- defines app.collection -->
<script src="views.js"></script><!-- requires app.collection -->

How do I declare a namespace in JavaScript?

---

Regarding refactoring, first take a look at how to use _.template, depending on the version of Underscore you're using, it might not work as you expect.

Then, for the repeating render function, it's totally normal to have those. They look similar, but will become much different over the development process.