app.js

Question

我试图了解如何在Backbone模型中处理多个集合实例。将有一个主要模型，该模型由多个集合实例组成。集合本身就是其他模型的组合。

模型A.
- 收集B.
  - C型
  - C型
- 收集B.
  - C型
  - C型
  - C型
- 收集B.
  - C型
- 收集B.
  - might even be empty but will only add more Model C's

这是非工作代码......

app.js

(function() {
  var App = {};
  window.App = App;

  var template = function(name) {
    return Mustache.compile($('#'+name+'-template').html());
  };

  App.World = Backbone.Model.extend({
    initialize: function() {
      var this.continent = new Array(); 
      this.continent[0] = new App.Continent(0);
      this.continent[1] = new App.Continent(1);
      this.continent[2] = new App.Continent(2);
      this.continent[3] = new App.Continent(3);
      this.continent[4] = new App.Continent(4);
      this.continent[5] = new App.Continent(5);
    }
  });

  App.Continent = Backbone.Collection.extend({
    initialize: function(id) {
      switch (id) {
        case 0:
          this.id = "Europe";
        case 1:
          this.id = "Asia";
        case 2:
          this.id = "Africa";
        case 3:
          this.id = "Australia";
        case 4:
          this.id = "South America";
        default:
          this.id = "North America";
      }
    }
  });

  App.Index = Backbone.View.extend({
    template: template('index'),
    initialize: function() {
      this.world = new App.World();
      this.world.on('all', this.render, this);
    },
    render: function() {
      this.$el.html(this.template(this));
      return this;
    },
    bigland: function() {
      return this.world;
    },
  });

  App.Router = Backbone.Router.extend({
    initialize: function(options) {
      this.el = options.el
    },
    routes: {
      "": "index"
    },
    index: function() {
      var index = new App.Index();
      this.el.empty();
      this.el.append(index.render().el);
    }
  });

  App.boot = function(container) {
    container = $(container);
    var router = new App.Router({el: container})
    Backbone.history.start();
  }
})()

的index.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
  <h1>Hello world</h1>
  <div id='app'>
    Loading...
  </div>

    <script type="text/x-mustache-template" id="index-template">

      <ul>
        {{#bigland}}
        <li>Hello {{.continent}}</li>
        {{/bigland}}
      </ul>

    </script>

    <script src="jquery.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <script src="mustache.js"></script>
    <script src="app.js"></script>    
    <script>$(function() { App.boot($('#app')); });</script>
  </body>
</html>

我试图从这个演示中获得的输出

Hello Europe
Hello Asia
Hello Africa
Hello Australia
您好，南美洲
Hello North America

的问题：

如何使用具有多个集合实例的模型来使用此代码。
这种模式有更好的方法吗？我愿意为嵌套模型使用主干插件，但希望看到一些正常工作的代码。
下一级实验是让Collection B的某些实例专门化并利用不同的业务规则。关于如何组织这种混乱的任何想法，如何放置辅助方法？关于逻辑所在的最佳实践，我可以把它放在主模型A，收集B内或其他地方吗？

Answer 1

JS Bin链接：

http://jsbin.com/ejohom/1/edit

我只探索了构建模型和集合的不同方法。我创建了一个testData结构，它代表了在初始化时如何加载这些数据。

此外，您将在集合中看到一个大陆探测器功能。

访问和维护模型中固定的集合数组

app.js

的index.html

我试图从这个演示中获得的输出

的问题：

1 个答案: