Javascript 主干js模型/视图设置_Javascript_Backbone.js

Javascript 主干js模型/视图设置

javascript backbone.js

Javascript 主干js模型/视图设置,javascript,backbone.js,Javascript,Backbone.js,我试图以一种纯粹的方式构建一个应用程序。这是设置模型和渲染视图的正确方法吗最新的小提琴您已经在模型和视图之间建立了良好的关系。我要说的一件事是，你很快就会厌倦这种模板化的方式： bank value test <div id="bankvalue">2</div> 用这种方式构建应用程序是很困难的。您可能希望开始使用一些客户端模板来简化您的工作。有点像胡子。一旦您使用多个键来模板化模型，或者模板化模型列表，这将非常有用。这里有一篇文章展示了一个主干示例：您已经在模

我试图以一种纯粹的方式构建一个应用程序。这是设置模型和渲染视图的正确方法吗

最新的小提琴

您已经在模型和视图之间建立了良好的关系。我要说的一件事是，你很快就会厌倦这种模板化的方式：

bank value test <div id="bankvalue">2</div>

用这种方式构建应用程序是很困难的。您可能希望开始使用一些客户端模板来简化您的工作。有点像胡子。一旦您使用多个键来模板化模型，或者模板化模型列表，这将非常有用。这里有一篇文章展示了一个主干示例：

您已经在模型和视图之间建立了良好的关系。我要说的一件事是，你很快就会厌倦这种模板化的方式：

bank value test <div id="bankvalue">2</div>

用这种方式构建应用程序是很困难的。您可能希望开始使用一些客户端模板来简化您的工作。有点像胡子。一旦您使用多个键来模板化模型，或者模板化模型列表，这将非常有用。这里有一篇文章展示了一个主干的例子：

好的，伙计们，谢谢你们的帮助

我已经将这个起始结构放入了我的完整应用程序中。我不得不关闭ajax，因为那里的服务器似乎已经停止响应

你能检查一下这个应用程序吗？告诉我我是否需要把一些东西放进收藏或者用不同的方式来称呼它等等

//最新小提琴

用户银行模型和用户银行视图

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

var-App=Backbone.Model.extend({
初始化：函数（）{
var=这个；
this.userBankModel=新的userBankModel（）；
this.userBankView=新的userBankView({
el:$（“银行价值”）
});
this.bitcoinModel=新的bitcoinModel（）；
this.bitcoinView=新的bitcoinView({
el:$（“#位值”）
});
//setInterval（函数（）{
//每秒获取一次比特币
that.bitcoinModel.getBitcoinValue（函数（mediumVal）{
//比特币模型
那是。比特币模型。集合({
当前值：mediumVal
});      
//呈现比特币的值
this.bitcoinView.render（this.bitcoinModel.get（“currentValue”）；
});
//}, 1000);
//渲染用户芯片
this.userBankView.render（this.userBankModel.get（“chips”）；
},
currentBitcoinValue:0，
开始设置：功能（状态）{
日志（“启动计时器”）；
this.state=状态；
//获得游戏比特币的锁定价值
var stashValue=this.bitcoinModel.get（“currentValue”）；
//具有锁定值的集合比特币模型
this.bitconmodel.set({
lockedValue:stashValue
});  
var initialTimer=5；
变量计时器={
i:初始化计时器，
onTimer:function（）{
var=这个；
document.getElementById（'timer'）.innerHTML=timer.i；
计时器-i；
如果（计时器i<0）{
app.gameResult（）；
Timer.i=initialTimer；//重置
}否则{
设置超时（Timer.onTimer，1000）；
}
}
};
Timer.onTimer（）；
},
gameResult:function（）{
log（“那么结果如何”）；
log（“this.state”，this.state）；
var lockedValue=this.bitcoinModel.get（“lockedValue”）；
var currentValue=this.bitcoinModel.get（“currentValue”）；
log（“lockedValue>>”，lockedValue）；
console.log（“currentValue>>”，currentValue）；
var result=“loss”；//默认情况下会丢失
//锁定值较高
如果(
this.lockedValue>this.currentValue&&this.state[“bet”]=“高”||
this.lockedValue