但是,當我嘗試重新組織命名空間下的代碼時,我無法使其執行任何操作,但我有一個正常工作的Backbone應用程序。我甚至無法觸發事件(通過點擊ID)來獲取我知道正在初始化的視圖(通過控制檯日誌消息),所以我想知道我是否以某種方式引入了一些基本缺陷。我遵循這個博客(法語)設置的模式http://www.atinux.fr/2011/12/10/organiser-son-code-backbone-js-en-modules/無法讓應用程序在命名空間後工作
在主application.js(見下文)中,我在文檔就緒啓動應用程序後實例化所有視圖和模型。介紹了作爲創建這個命名空間的結果產生一個變化設置的意見機型
this.views.clock_view = new this.Views.clockView({ model: this.models.game});
裏面的模塊文件夾中,我有一個views.js和models.js。我創建像這樣每個視圖和對象,以app.Views or app.Models
相應
app.Views.announceView = Backbone.View.extend({
....
app.Views.optionsView = Backbone.View.extend({
...
(根據初始化一個的console.log語句)這app.Views.optionsView是越來越初始化,但是當我點擊#new_game的開頭的console.log在startNewGame是沒有得到觸發
'click #new_game': 'startNewGame'
// 'click .action_button': 'startNewGame'
},
startNewGame: function() {
console.log("startNewGame");
this.model.new();
},
由於名字空間的結果,我做了另外一個重要變化是,當我創建了內部的其他視圖中的一個新的觀點。根據以前的(非命名空間中的應用程序),我創建了從QuestionListView個別問題項目
var view = new QuestionListItemView({ model: game });
,但現在我在做
var view = new app.Views.questionListItemView({ model: app.models.game })
因爲模型的實例在應用程序保存到 .js文件,不過,我也嘗試過使用「this.models.game」
var view = new app.Views.questionListItemView({ model: this.models.game })
無論哪種方式,遊戲模式介入之前,我不能觸發startNewGame功能大綱d以上,所以這不僅僅是如何識別模型的問題。
我也想知道我是否應該使用this.Views或app.Views後的「新」從內部
var view = new app.Views.questionListItemView({ model: this.models.game })
我會很感激創建新視圖時,如果你能幫助我找出什麼破綻我介紹過。
的application.js
var app = {
// Classes
Collections: {},
Models: {},
Views: {},
// Instances
collections: {},
models: {},
views: {},
init: function() {
this.models.game = new this.Models.game();
this.views.story_view = new this.Views.storyView(); #doesn't have a model
this.views.clock_view = new this.Views.clockView({ model: this.models.game});
this.views.field_view = new this.Views.fieldView({ model: this.models.game});
this.views.options_view = new this.Views.optionsView({ model : this.models.game});
this.views.announcement_view = new this.Views.announceView({ model: this.models.game});
this.views.question_list_view = new this.Views.questionListView({ model : this.models.game});
this.views.question_list_item_view = new this.Views.questionListItemView({ model : this.models.game});
}
};
$(document).ready(function() {
app.init();
}) ;
選項觀點得到初始化,但是當我點擊#ID
app.Views.optionsView = Backbone.View.extend({
// el: $("#options"),
el: $("#options"),
initialize: function() {
console.log("app views OptionsView initialized");
// this.model.bind("gameStartedEvent", this.removeGetAnswerButton, this);
this.model.bind("gameStartedEvent", this.disableNewGame, this);
},
events: {
'click #demo': 'startDemo',
'click #new_game': 'startNewGame'
// 'click .action_button': 'startNewGame'
},
startDemo: function(){
console.log("start demo");
this.model.demo();
},
startNewGame: function() {
console.log("startNewGame");
this.model.new();
},
disableNewGame: function(){
$('#new_game').attr("disabled", true);
}
});
更新 我的文件結構是這樣的,我不能觸發startNewGame功能
<%= javascript_include_tag 'application.js'%>
<%= javascript_include_tag 'modules/models'%>
<%= javascript_include_tag 'modules/views'%>
在視圖和模型的頂部我只是做這樣的事情
app.Views.optionsView = Backbone.View.extend({
ie ..沒有進一步的文件準備好了。事實上,包括其他文檔準備在這些文件中打破的application.js初始化
類似'el:$(「#options」)'的東西可能是你問題的一部分。當你試圖訪問它時,你確定'#options'是否在DOM中? – 2013-02-12 03:29:30
@ muistooshort我認爲這將通過在文檔中啓動應用程序來完成。我不知道如何檢查它是否在dom中,而不是通過使用該文檔準備好 - 我點擊了Chrome控制檯中的元素,我可以看到#options .. – Leahcim 2013-02-12 03:37:37
'$('#options')'將會在對應的視圖被解析時進行評估。作爲一個經驗法則,你絕對不應該在視圖定義中使用'el:$(...)',只需使用選擇器並讓Backbone稍後將其轉換爲DOM節點對象。 – 2013-02-12 04:23:20