Question

我遇到了一些问题，我知道var app = app || {}表示创建变量 app 是空对象，然后通过重新定义活动来使用 app 。

但我不明白如何像上面的方法一样使用骨干中的空对象。

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>

这是我的来源。

我想在Router和View之间进行通信，因为我不明白为什么要指出

app.collcetion不是构造函数

然后，我在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"
        }
    ]);

很棒。（在videoList.js中）看下面的screentshot。

我想知道如何重构重复的代码。

请参阅我的以下来源
的 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;
      }
    });

我不想重复相同的对象和来源。

如何更改它们？

Answer 1

var app = app || {};技术只是一种命名空间模式，可以避免污染全局命名空间。

More details on this namespacing pattern

创建一个名为app的全局变量，然后将应用程序的代码添加到其中。在多个文件中拆分应用程序时，您希望能够使用app变量（如果之前已定义过）。

输入app || {}技巧，如果{1}}变量是真实的，则返回app变量;如果{}是假的，则会app空对象（可能是undefined）。

虽然这种技术可以实现文件的不同排序，但如果文件需要另一个组件（如app.collection），则应相应地对文件进行排序。

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

How do I declare a namespace in JavaScript?

关于重构，请先查看how to use _.template，具体取决于您正在使用的Underscore版本，它可能无法正常运行。

然后，对于重复render函数，拥有它们是完全正常的。它们看起来很相似，但在开发过程中会有很大不同。

如何重新定义对象并传达对象？

1 个答案: