Question

这是一个以骨干制作的博彩游戏。我有 100的赏金来帮助我将它重构为基于木偶的应用程序。

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

我认为步骤将从创建新的木偶应用程序和路由器开始。

//regions

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

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

//compositeview

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

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

然后将旧骨干视图转换为Marionette的ItemViews和CompositeViews。

  //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);
      });
    }
  });

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



  //BitcoinModel
  var BitcoinModel = Backbone.Model.extend({
    defaults: {
      currentValue: 0,
      lockedValue: 0
    },
    initialize: function() {
      console.log("BitcoinModel initialize");
      this.on("change:currentValue", function(model) {
        var currentValue = model.get("currentValue"); // 494
        console.log("Changed my currentValue to " + currentValue);
      });
    },
    getBitcoinValue: function(callback) {

      /*
        Backbone.ajax({
          dataType: 'json',
          url: "https://api.bitcoinaverage.com/ticker/USD",
          crossDomain: true,
          success: function(data) {
            callback(data);
          }
        });
      */

      json= {
        bid: 320,
        ask: 444
      };

      var mediumValue = (json.bid + json.ask) / 2;

      callback(mediumValue);
    }
  });

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





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

      this.userBankModel = new UserBankModel();
      this.userBankView = new UserBankView({
        el: $("#bankvalue")
      });

      this.bitcoinModel = new BitcoinModel();
      this.bitcoinView = new BitcoinView({
        el: $("#bitvalue")
      });

      //setInterval(function() {
        //get val of bitcoin every second
        that.bitcoinModel.getBitcoinValue(function(mediumVal) {

          //set bit coin model
          that.bitcoinModel.set({
            currentValue: mediumVal
          });      

          //render the bit coin value
          that.bitcoinView.render(that.bitcoinModel.get("currentValue"));
        });
      //}, 1000);


      //render users chips
      this.userBankView.render(this.userBankModel.get("chips"));
    },
    currentBitcoinValue: 0,
    startBet: function(state) {
      console.log("start timer");
      this.state = state;

      //get locked value of bitcoin for the game

      var stashValue = this.bitcoinModel.get("currentValue");

      //set bit coin model with locked value
      this.bitcoinModel.set({
        lockedValue: stashValue
      });  

      var initialTimer = 5;

      var Timer = {
        i: initialTimer,
        onTimer: function() {
          var that = this;
          document.getElementById('timer').innerHTML = Timer.i;
          Timer.i--;
          if (Timer.i < 0) {
            app.gameResult();
            Timer.i = initialTimer; //reset
          } else {
            setTimeout(Timer.onTimer, 1000);
          }
        }
      };

      Timer.onTimer();
    },
    gameResult: function() {
      console.log("whats the result then");

      console.log("this.state", this.state);

      var lockedValue = this.bitcoinModel.get("lockedValue");
      var currentValue = this.bitcoinModel.get("currentValue");

      console.log("lockedValue>>", lockedValue);
      console.log("currentValue>>", currentValue);


      var result = "loss";//lose by default

      //locked value was higher
      if (
        this.lockedValue > this.currentValue && this.state["bet"] == "high" ||
        this.lockedValue < this.currentValue && this.state["bet"] == "low"
      ) {
        result = "win";//win if conditions are met
      }

      //get current value of user chips
      var newVal = this.userBankModel.get("chips");
      if (result == "win") {
        console.log("WIN -- you get chips");
        newVal += this.state["wager"];

      } else {
        console.log("LOSS -- you loose chips");
        newVal -= this.state["wager"];
      }

      //won or lost chips -- set new chip value
      this.userBankModel.set({
        chips: newVal
      });

      //render new user chips
      this.userBankView.render(this.userBankModel.get("chips"));
    }
  });





  var app = new App();

  var FormView = Backbone.View.extend({
    el: '#wager-form',
    events: {
      "submit": "doMethod"
    },
    doMethod: function(e) {

      e.preventDefault();

      var obj = [];
      this.$el.find('input[name]').each(function() {
          obj[this.name] = this.value;
      });

      //start bet
      app.startBet(obj);

    }
  });

  var form = new FormView();

Here is the latest js fiddle.

  var App = Backbone.Model.extend({
    initialize: function() {
    //standard app
    }
  });

我想了解更多关于使用Marionette和骨干的最佳实践。为什么使用木偶，有什么优势？

重构以下示例是否是一个简单的案例。或者基于木偶的方法更像是一个集合？

  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'});

但这会是重构App模型以使用Marionette的方法吗？

<!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>

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

MyApp.addInitializer(function(options){
  // do useful stuff here
        var otherView1= new OtherView1({
          model: options.otherModel1 
        });
  MyApp.mainRegion.show(otherView1);
});

MyApp.addInitializer(function(options){
  new MyAppRouter();
  Backbone.history.start();
});

好的代码看起来像这样吗？我将模型泵入选项变量？

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
      });
    }
});

这是我目前的申请 - 但我不确定如何用木偶前进来构建它？

Latest fiddle of the entire core application

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

使用核心模型调用并桥接其他模型。这样的事情。

老骨干方式

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
      });
});

Marionette应该像这样工作吗？

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();

以及区域怎么样？我是否停止使用el：selectors作为视图并依赖于区域？如果是这样，怎么样？

  //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"
});

我已经制作了一个新的jsfiddle来开始构建the marionette version。

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

<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>

如果我们专注于视图一秒钟，我将如何以我想要的方式重构它。

HTML

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);

JS

{{1}}

http://jsfiddle.net/c72Vg/168/

Answer 1

前一段时间答案肯定是“不”，请使用Marionette的Application.addInitializer(function () {})但是当Marionette v3被释放后将被删除，并且在它的位置你应该use events.

木偶，骨干js投注游戏

1 个答案: