Question

我很难用我的代码弄清楚什么是错的？

我尝试制作的东西是获取模型的集合并显示它们这是我的模特

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天玩骨干而我在回复的所有内容都是一个空白屏幕，应该加载我的数据。

此外，还会收到集合并且所有数据都已就位，问题就是渲染

Answer 1

原因是默认情况下，Backbone View在初始化时需要el参数。这意味着渲染会将内容写入el中。

如果你已经在html页面中有一些div，那么你可以像这样初始化骨干视图：

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

然后在渲染时，它将写入该div。

但是，看起来你正在创建一个没有页面元素的视图，如果你做了render（）。el，这将返回html文本，并附加到主html。

虽然这是有道理的，但骨干构造函数并不知道这一点。如果你看到this fiddle，你可以看到，在初始化MessageListItemView之后，$ el为null。它需要在你做之前构建

this.$el.html(xxxx);

一个hacky修复是添加

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

更标准的做法是通过覆盖initialize函数并执行setElement（）;

同样需要对MessageListView进行

Answer 2

您正在调用colleciton.fetch，但在创建collectionView之前不等待它获取数据。

var def = myMessageList.fetch();返回延期。 def.done(function(){ /* rest of the code here */})应该解决问题。

什么不是我的代码渲染集合？

2 个答案: