0

バックボーン モデル内のコレクション インスタンスの数を処理する方法を理解しようとしています。プライマリ モデルがあり、そのモデルはコレクションの複数のインスタンスで構成されます。コレクション自体は、他のモデルのグループです。

  • モデル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>

このデモから取得しようとしている出力

  • こんにちはヨーロッパ
  • こんにちはアジア
  • こんにちはアフリカ
  • こんにちはオーストラリア
  • こんにちは南アメリカ
  • こんにちは北米

質問:

  1. コレクションの複数のインスタンスを持つモデルを使用して、このコードを機能させるにはどうすればよいですか。
  2. このモデルを構築するより良い方法はありますか? ネストされたモデルにバックボーン プラグインを使用することにオープンですが、実際に動作するコードを見たいと思っています。
  3. 次のレベルの実験は、コレクション B のいくつかのインスタンスを特殊化し、さまざまなビジネス ルールを利用できるようにすることです。ヘルパーメソッドを配置する場所など、この混乱を整理する方法について何か考えはありますか? そのロジックが存在する場所に関するベストプラクティスはありますか?メインモデルA、コレクションB内、または他の場所に配置できますか?
4

1 に答える 1

0

JS ビン リンク:

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

モデルとコレクションを構築する別の方法を検討しただけです。初期化時にこのデータをロードする方法を表す testData 構造を作成しました。

また、コレクションには大陸ファインダー機能が表示されます。

于 2012-12-20T16:55:03.183 に答える