0
Мне тяжело пытаться выяснить, что с моим кодом?Что не делает мой код рендерингом коллекции?
вещь, которую я хочу tryng сделать, это получить коллекцию моделей уплотнительных и отображать их здесь мои модели
var MessageModel = Backbone.Model.extend({
defaults : {
id: "",
from:"",
titleMessage:"",
bodyMessage:"",
bodyMessageTrim:""
}
});
Моя коллекция
var MessageListCollection = Backbone.Collection.extend({
url: '../js/dataDummy/populateJsonMessages.json',
model: MessageModel
});
My Views
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 дня, играя с магистралью , и все, что у меня есть в ответ, - это пустой экран, на котором должны быть загружены мои данные.
Также коллекции достигается и все данные на месте только проблема вынести его
Обновление: после ответа las я тестирую непосредственно в консоли, и он работает так, как ожидается, но я думаю, что моя проблема в том, что я пытаюсь сделать внутри div-> responseOfMessageModel.render(), не делает потому что нет в DOM –
Извините, что догнал что-то, см. этот jsfiddle. без css, но я в основном скопировал все ваши html и js. и добавил "this. $ el = $ (this.el);" в MessageListItemView и MessageListView. http://jsfiddle.net/nickrechard/omnfbtud/14/ – Evilsanta