Backbone.js 什么使我的代码不能呈现集合？_Backbone.js_Backbone Views_Backbone.js Collections

Backbone.js 什么使我的代码不能呈现集合？

backbone.js

Backbone.js 什么使我的代码不能呈现集合？,backbone.js,backbone-views,backbone.js-collections,Backbone.js,Backbone Views,Backbone.js Collections,我很难弄清楚我的代码是什么我想做的是收集模型并展示它们这是我的模型 var MessageModel = Backbone.Model.extend({ defaults : { id: "", from:"", titleMessage:"", bodyMessage:"", bodyMessageTrim:"" } }); 我的收藏 var MessageListCollection = Backbone.Collection.exten

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

我想做的是收集模型并展示它们这是我的模型

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天的时间和脊梁一起玩作为回应，我得到的只是一个空白屏幕，应该在那里加载我的数据

此外，已到达集合并且所有数据都已就位—问题在于它的呈现

原因是主干视图在初始化时默认需要el参数。这意味着渲染将在el中写入内容

如果您在html页面中已经有一些div，则可以如下初始化主干视图：

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

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

但是，看起来您正在创建一个页面中没有元素的视图，如果您执行render.el，这将返回html文本，并附加到主html

虽然这是有道理的，但主干构造函数并不知道这一点。如果您看到，您可以看到，在初始化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;
},

更标准的做法是覆盖initialize函数和do setElement

对于MessageListView也需要执行同样的操作，您正在调用colleciton.fetch，但不必在创建collectionView之前等待它获取数据

var def=myMessageList.fetch；返回一个延迟的。def.donefunction{/*这里的其余代码*/}应该可以解决这个问题。

这个答案非常准确，但我尝试了所描述的黑客方法，但没有成功，因为我是新手，所以我对您提到的标准方法有一个模糊的概念，但是你能给我举一个这样的例子吗？更新：在las回答之后，我直接在控制台中测试，它按预期工作，但我认为我的问题是，我试图在div->responseOfMessageModel.render中进行渲染，但没有这样做，因为不在域中。抱歉，我遇到了一些问题，请参阅此JSFIDLE。没有css，但我基本上复制了你所有的html和js。并添加了这个。$el=$this.el；在MessageListItemView和MessageListView上。我尝试了一种不同的方法，在模型的每次渲染之后，都将render.el隐藏起来，在集合视图中完成所有这些之后，调用this.$el来渲染所有的render.el