Backbone.js 木偶，赌博游戏_Backbone.js_Marionette

Backbone.js 木偶，赌博游戏

backbone.js

Backbone.js 木偶，赌博游戏,backbone.js,marionette,Backbone.js,Marionette,这是一个赌博游戏，在主干。我得到了100英镑的赏金来帮助我把它重构成一个基于木偶的应用程序我不确定从哪里开始——在重新配置模型方面，如何交换视图以使其成为区域我相信这些步骤将从创建一个新的木偶应用程序和路由器开始 var app = Marionette.Application.extend({ initialize: function(options) { console.log('My container:', options.container); } }); var

这是一个赌博游戏，在主干。我得到了100英镑的赏金来帮助我把它重构成一个基于木偶的应用程序

我不确定从哪里开始——在重新配置模型方面，如何交换视图以使其成为区域

我相信这些步骤将从创建一个新的木偶应用程序和路由器开始

var app = Marionette.Application.extend({
  initialize: function(options) {
    console.log('My container:', options.container);
  }
});

var app = new app({container: '#app'});


//router

var MyRouter = Marionette.AppRouter.extend({
  appRoutes: {
    "some/route": "someMethod"
  },
  routes : {
    "some/otherRoute" : "someOtherMethod"
  },
  someOtherMethod : function(){
    // do something here.
  }
});

然后创建一些区域和布局来管理旧的主干视图

//regions

MyApp.addRegions({
  bankValue: "#bankvalue",
  bitValue: "#bitvalue"
});

然后将旧的主干视图转换为木偶网的ItemView和CompositeView

//compositeview

var CompositeView = Marionette.CompositeView.extend({
  template: "#personalbank"
});

new CompositeView({
  model: userModel,
  collection: someCollection
});

但这是重构应用程序模型以使用木偶网的方法吗

  var App = Marionette.Application.extend({
      initialize: function(options) {
         console.log('My container:', options.container);

        //invoke other models
        this.otherModel1 = new OtherModel1();
        this.otherView1= new OtherView1({
          el: $("#selector1")
        });

      }
    });

  //add the selectors in one place?
  MyApp.addRegions({
    someRegion: "#some-div",
    anotherRegion: "#another-div"
  });


 // Although applications will not do anything
  // with a `container` option out-of-the-box, you
  // could build an Application Class that does use
  // such an option.
  var app = new App({container: '#app'});

这是我的应用程序的结构。我如何正确地重构它以使用木偶呢

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>backbone js</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.4/backbone.marionette.js"></script>

</head>

<body>
    Content of the document......

    <div id="app"></div>

    <div id="select1"></div>
    <div id="select2"></div>

    <script>

          //myModel1
          var MyModel1 = Backbone.Model.extend({
            initialize: function() {
              console.log("myModel1 initialize");
            }
          });

          //myView1
          var MyView1 = Backbone.View.extend({
            initialize: function() {
             console.log("myView1 initialize");
              this.render();
            },
            render: function(value) {
               this.$el.html(value);
            }
          });



          //myModel2
          var MyModel2 = Backbone.Model.extend({
            initialize: function() {
              console.log("myModel2 initialize");
            }
          });

          //myView2
          var MyView2 = Backbone.View.extend({
            initialize: function() {
             console.log("myView2 initialize");
              this.render();
            },
            render: function(value) {
               this.$el.html(value);
            }
          });




    //the core that invokes and bridges the other models.
      var App = Backbone.Model.extend({
            initialize: function() {
            var that = this;

                this.myModel1 = new MyModel1();
                this.myView1 = new MyView1({
                    el: $("#select1")
                });

                this.myModel2 = new MyModel2();
                this.myView2 = new MyView2({
                    el: $("#select2")
                });
            }
        });

    var app = new App();



    /*ok marionette stuff*/

    var MyApp = Marionette.Application.extend({
      initialize: function(options) {
        console.log(options.container);
      }
    });

    var myApp = new MyApp({container: '#app'});





      </script>
</body>
</html>

这是我当前的应用程序-但我不确定如何构建它与木偶前进

好的，我的应用程序有这样的标准主干

核心模型调用并连接其他模型。像这样的

老路

var App = Backbone.Model.extend({
    initialize: function() {

      this.myModel1 = new MyModel1();
      this.myView1 = new MyView1({
        el: $("#select"),
        model: this.myModel1
      });

      this.myModel2 = new MyModel2();
      this.myView2 = new MyView2({
        el: $("#select"),
        model: this.myModel2
      });
    }
});

那么木偶应该是这样工作的吗

App.addInitializer(function(options) {
      App.myModel1 = new MyModel1();
      App.myView1 = new MyView1({
        el: $("#select1"),
        model: App.myModel1
      });

      App.myModel2 = new MyModel2();
      App.myView2 = new MyView2({
        el: $("#select2"),
        model: App.myModel2
      });
});

那么地区呢。。我是否停止在视图中使用el:选择器并依赖于区域？如果是，怎么做

var View1Region = Backbone.Marionette.Region.extend({
  el: "#select1", // Must be defined for this syntax
  // Whatever other custom stuff you want
});

var View2Region = Backbone.Marionette.Region.extend({
  el: "#select2", // Must be defined for this syntax
  // Whatever other custom stuff you want
});

// Use these new Region types on App.
App.addRegions({
  view1Region: View1Region,
  view2Region: View2Region
});

// This is equivalent to:
App.view1Region = new View1Region();
App.view2Region = new View2Region();

我制作了一个新的JSFIDLE来开始构建

但是我是否正确地调用了它，正确地使用了新的复合视图

  //UserBankModel
  var UserBankModel = Backbone.Model.extend({
    defaults: {
      chips: 200
    },
    initialize: function() {
      console.log("UserBankModel initialize");
      this.on("change:chips", function(model) {
        var chips = model.get("chips"); // 23232
        console.log("Changed my chips to " + chips);
      });
    }
  });



var CompositeView = Marionette.CompositeView.extend({
  template: "#personalbank"
});

var userBankView = new CompositeView({
  model: UserBankModel
});



var MyApp = Marionette.Application.extend({
  initialize: function(options) {
    console.log('My container:', options.container);

    this.userBankModel = new UserBankModel();

  }
});

var app = new MyApp({
  container: '#app'
});

app.addRegions({
  bankValue: "#bankvalue",
  bitValue: "#bitvalue"
});

如果我们将注意力集中在视图上，我将如何按照我打算的方式重构它

html

不久前，答案可能是“否”，请使用木偶网的

应用程序。addInitializer（function（）{}）

但是当木偶网v3发布时，它将被删除，并且在它的位置上，您希望删除它

所以-我估计的方法是正确的-最新的方法吗？-这是最新的JSFIDLE-我们如何改进它，使其成为一个纯粹的木偶主干应用程序这是一个基本的木偶视图/设置-但是我们如何发展最新的项目应用程序？一个杰出的赏金-寻找一个木偶解决方案到JSFIDLE。我真的不知道为什么从传统主干到木偶主干的转换似乎是虚幻的，永远得不到回答。我只是不想攻击它。有人想让100+代表在6小时内尝试回答这个问题吗

App.addInitializer(function(options) {
      App.myModel1 = new MyModel1();
      App.myView1 = new MyView1({
        el: $("#select1"),
        model: App.myModel1
      });

      App.myModel2 = new MyModel2();
      App.myView2 = new MyView2({
        el: $("#select2"),
        model: App.myModel2
      });
});

var View1Region = Backbone.Marionette.Region.extend({
  el: "#select1", // Must be defined for this syntax
  // Whatever other custom stuff you want
});

var View2Region = Backbone.Marionette.Region.extend({
  el: "#select2", // Must be defined for this syntax
  // Whatever other custom stuff you want
});

// Use these new Region types on App.
App.addRegions({
  view1Region: View1Region,
  view2Region: View2Region
});

// This is equivalent to:
App.view1Region = new View1Region();
App.view2Region = new View2Region();

  //UserBankModel
  var UserBankModel = Backbone.Model.extend({
    defaults: {
      chips: 200
    },
    initialize: function() {
      console.log("UserBankModel initialize");
      this.on("change:chips", function(model) {
        var chips = model.get("chips"); // 23232
        console.log("Changed my chips to " + chips);
      });
    }
  });



var CompositeView = Marionette.CompositeView.extend({
  template: "#personalbank"
});

var userBankView = new CompositeView({
  model: UserBankModel
});



var MyApp = Marionette.Application.extend({
  initialize: function(options) {
    console.log('My container:', options.container);

    this.userBankModel = new UserBankModel();

  }
});

var app = new MyApp({
  container: '#app'
});

app.addRegions({
  bankValue: "#bankvalue",
  bitValue: "#bitvalue"
});

<div id="list"></div>

<script type="text/template" id="list-template">
    <div class="pagination">
        <ul></ul>
    </div>
</script>

<script type="text/template" id="item-template">
    <a href="#<%= id %>"><%= id %></a>
</script>

var Item = Backbone.Model.extend();
var Items = Backbone.Collection.extend({
    model: Item
});

var Views = {};

Views.ListItem = Backbone.Marionette.ItemView.extend({
    template: "#item-template",
    tagName: 'li'
});

Views.List = Backbone.Marionette.CompositeView.extend({
    template: "#list-template",
    itemView: Views.ListItem,
    itemViewContainer: "ul"
});

var Data = [
    {id: 1},
    {id: 2}
];

var items = new Items(Data);

var list = new Views.List({
    collection: items
});

list.render();

$("#list").html(list.el);