什麼不是讓我的代碼呈現集合？

我是tryng做出的事情是得到一個集合O模型，並顯示它們這裏是我的模型

var MessageModel = Backbone.Model.extend({ 
    defaults : { 
    id: "", 
    from:"", 
    titleMessage:"", 
    bodyMessage:"", 
    bodyMessageTrim:"" 
    } 
});

我的收藏

var MessageListCollection = Backbone.Collection.extend({ 
    url: '../js/dataDummy/populateJsonMessages.json', 
    model: MessageModel 
});

我的視圖

var MessageListItemView = Backbone.View.extend({//view for a row in the message list 
    template: _.template($('#tpl-message-item-list').html()), 
    render: function(eventName){ 
    this.$el.html(this.template(this.model.toJSON())); 
    return this; 
    }, 
}); 

var MessageListView = Backbone.View.extend({//view por all messages listed 
    className:'messages', 
    render: function(){ 
    this.collection.each(function(model){ 
     var msgListAll = new MessageListItemView({model:model}); 
     console.log(msgListAll.el); 
     this.$el.append(msgListAll.render().el); 
    }, this); 
    return this; 
});

終於我的路線

//global model variables so i can interact with the different views 
var myMessageModelAction = new MessageModel();//whole message information 
var myMessageListAction = new MessageListCollection();//all the messages to be listed 

var AppRouter = Backbone.Router.extend({ 
    routes:{ 
    "messages": "messagesList" 
    }, 
    messagesList: function(){ 
    var myMessageList = new MessageListCollection(); 
    myMessageList.fetch(); 
    console.log(myMessageList); 
    var myMessageListView = new MessageListView({collection:myMessageList}); 
    console.log(myMessageListView); 
    myMessageListView.render(); 
    console.log("dame esto"); 
    console.log(myMessageListView.el); 
    $('#rendered').html(myMessageListView.render().el); 
    } 
}); 
var appRouter = new AppRouter(); 
Backbone.history.start();

是被稱爲集合碼內的文件只是一個JSON純文本，但如果它幫助這裏是

[ 
    {"id": "1", "from":"user1", "titleMessage":"Welcome to the Team", "bodyMessage":"Congratulations you passed the selection tests", "bodyMessageTrim": "Congratulations you passed..."}, 
    {"id": "2", "from":"user2", "titleMessage":"First Task", "bodyMessage":"Hello you have to make some changes in the UI", "bodyMessageTrim": "Hello you have to..."}, 
    {"id": "3", "from":"user2", "titleMessage":"Re:Welcome to the Team", "bodyMessage":"No problem if it's anything you might need just let me know", "bodyMessageTrim": "No problem if it's..."}, 
    {"id": "4", "from":"user2", "titleMessage":"Re:First Task", "bodyMessage":"Ok i am going to talk to the design team to give you all the assets", "bodyMessageTrim": "Ok i am going to talk..."}, 
    {"id": "5", "from":"user2", "titleMessage":"Re:Re:First Tak", "bodyMessage":"Ok that is it great work", "bodyMessageTrim": "Ok that is it..."}, 
    {"id": "6", "from":"user1", "titleMessage":"Meeting Tomorrow", "bodyMessage":"Hi this is just a notice that tomorrow we will have a meet with all new members", "bodyMessageTrim": "Hi this is just a..."} 
]

該指數看起來像這樣

<!DOCTYPE HTML> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>test</title> 
     <link rel="stylesheet" href="../assets/bootstrap.min.css"> 
     <link rel="stylesheet" href="../assets/index.css"> 
    </head> 
    <body> 
     <!-- Templates --> 
     <script type="text/template" id="tpl-message-item-list" > 
     <div class="messageItem"> 
      <div><%= from %></div> 
      <div><%= titleMessage %></div> 
      <div><%= bodyMessageTrim %></div> 
     </div> 
     </script> 
     <div class="jumbotron"> 
     <div class="container" id="rendered"> 
      <p>Looks like you are in the wrong place run now to a <a href="localhost/my/app/">safe place</a></p> 
     </div> 
     </div> 
     <!-- Libraries --> 
     <script src="../js/lib/jquery-2.1.4.min.js"></script> 
     <script src="../js/lib/underscore-min.js"></script> 
     <script src="../js/lib/backbone-min.js"></script> 
     <!-- Relevant Scripts --> 
     <!--script src="../js/app.js"></script--> 
     <script src="../js/views/appIndex.js"></script> 
     <script src="../js/models/appIndex.js"></script> 

     <script src="../js/collections/appIndex.js"></script> 
     <script src="../js/routers/routes.js"></script> 
    </body> 
    </html>

任何幫助是好的，因爲我迷路了，我有3天與骨幹一起玩，我所有的迴應是一個空白的屏幕，它應該加載我的數據。

也達到了集合和所有數據都僅僅是在原地的問題是渲染它

來源

2015-08-28 Ian Coronado

更新：後，拉斯回答我直接在控制檯測試，它按預期工作，但我認爲我的問題是，我試圖呈現一個div-> responseOfMessageModel.render（），沒有做它因爲不在DOM –

對不起，有些東西，看到這個jsfiddle。沒有CSS，但我基本上覆制了所有的HTML和JS。並添加了「this。$ el = $（this.el）;」在MessageListItemView和MessageListView上。 http://jsfiddle.net/nickrechard/omnfbtud/14/ – Evilsanta

的原因是，骨幹查看，默認情況下，預計的EL參數，當你進行初始化。這意味着渲染將寫入該el內的東西。

如果你已經在HTML頁面中的一些股利，那麼你就可以初始化這樣的骨幹觀點：

var messageItemView=new MessageItemView({model:model,el:'#somediv'});

然後渲染時，將寫入該分區。但是，它看起來像是在頁面中創建沒有元素的視圖，如果您執行render（）。el，這將返回html文本，並且您將追加到主html。

雖然這很有意義，但骨幹構造函數並不知道這一點。如果看到this fiddle，則可以看到，在初始化MessageListItemView之後，$ el爲空。它需要建立在你之前

this.$el.html(xxxx);

哈克的解決辦法是增加一個

render: function(eventName){ 
    this.$el=$(this.el);// this create the $el element; 
    this.$el.html(this.template(this.model.toJSON())); 
    return this; 
},

更標準是做到這一點的覆蓋初始化函數，做setElement（）;

同樣的事情需要爲MessageListView做太

來源

2015-08-28 21:20:37 Evilsanta

這個答案是非常準確的，但我嘗試了哈希方式描述，但沒有奏效，而且我對這個新手我有一個模糊的想法你提到的方式，但你可以給我一個這樣的例子嗎？ –

要調用colleciton.fetch而不是等待它創建的CollectionView之前得到的數據。

var def = myMessageList.fetch();返回延期。 def.done(function(){ /* rest of the code here */})應該解決這個問題。

來源

2015-08-30 09:05:54

我嘗試了一種不同的方法，並且在模型的每個呈現都保持存儲render（）。el之後，並且在集合視圖中的所有這些完成之後，調用this。$ el以呈現所有這些 –

什麼不是讓我的代碼呈現集合？

回答

相關問題