Backbone js模型/視圖設置

Question

我想以純粹的方式構建應用程序。這是設置模型和渲染視圖的正確方法嗎？

最新的小提琴 https://jsfiddle.net/g48ckukd/19/

var UserBankModel = Backbone.Model.extend({ 
    defaults: { 
    chips: 100 
    }, 
    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 UserBankView = Backbone.View.extend({ 
    initialize: function() { 
    this.render(); 
    }, 
    render: function() { 
    this.$el.html(userBankModel.get("chips")); 
    } 
}); 


//user bank model initialize with default 100 chips 
var userBankModel = new UserBankModel(); 

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


var userBankView = new UserBankView({ 
    el: $("#bankvalue") 
}); 
userBankView.render(); 

Answer 1

你已經設置了您的模型和視圖罰款之間的關係。有一件事我要說的是，你很快將模板化的方式，你的輪胎是：

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

在您的標記，然後選擇在您的視圖中的DOM對象和渲染功能設置HTML：

render: function() { 
    this.$el.html(userBankModel.get("chips")); 
} 

這樣很難建立一個應用程序。您可能想要開始使用一些客戶端模板來簡化您的生活。像鬍子一樣。這將開始有用的，一旦你模板與許多鍵模型，或模板列表的模型。這裏有一篇文章展示了一個骨幹網絡的例子：https://gist.github.com/kyleondata/3440492

Answer 2

好吧，謝謝你的幫助。

我已經把這個起始結構放到我的完整應用程序中。我必須關閉ajax，因爲服務器似乎已停止響應。

你能檢查過這個應用程序 - 告訴我，如果我需要把東西到一個集合或不同等稱之爲..

//最新小提琴 https://jsfiddle.net/g48ckukd/31/

用戶銀行模式和用戶的銀行視圖

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

是intwines以上和表單事件

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