Question

我在配置代码中的错误方面遇到了一些问题。我编写了index.html，其中包含模板，以及包含模型，集合和视图的jscript文件。

请让我知道我在哪里做错了。我特别怀疑我是否错误地使用了el标签..或者在获取json数据或渲染函数时是错误的。

的index.php

<head>
    <meta charset="utf-8">
    <title>Backbone.js News List</title>
    <link rel="stylesheet" href="newsList.css"/>
 </head>

<body>
 <script src="../../test/vendor/json2.js"></script>
 <script src="../../test/vendor/jquery.js"></script>
 <script src="../../test/vendor/underscore.js"></script>
 <script src="../../backbone.js"></script>
 <script src="newsList.js"></script>
<header>
   <h1 id="center_text">News List</h1>
 </header>    
<h2>News Trending</h2>    
<div id="news-list"></div>
    <div id="footer">
       <h3 id="center_text" >Copy Right</h3>
     </div>

 <!-- Templates -->
 <script type="text/template" id="item-template">
     <div class="container" id="news">
        <img id="img" src = <%- img %> >
        <section>
            <b id="title" ><%- title %> </b>
            <br><%- snippet %>
            <p><small id ="date"> <%- date%> </small></p>
          </section>
       </div>
    </script>
 </body>
</html>

JavaScript代码 newsList.js

$(function(){

    var NewsList = Backbone.Model.extend({

    // Default attributes for the todo item.
    defaults: {
        id:"",
        title: "empty NewsList...",
        img:"",
        snippet:"",
        date:""
    },

    initialize: function(){
      console.log("model initialized");
    }

  });



  var NewsListColln = Backbone.Collection.extend({

    // Reference to this collection's model.
    model: NewsList,
     url: 'http://api.divum.in/training/json/newslist.php',
    initialize: function(){
       console.log("colln initialized");
  }

  });


    //VIEW
    // The DOM element for a news item...
    var NewsListView = Backbone.View.extend({

    //... is a list tag.
    el:"#news-list",

    template: _.template($('#item-template').html()),

    initialize: function() {
      console.log("in view");
      this.render;
    },

    render: function(eventName) {
        console.log("in render");
      var n = newsLists.content;
        $.each(n.news, function(newslist){
        var newsTemplate= this.template(newslist.toJson());
         $(this.el).append(newsTemplate);
      }, this);

      return this;
      }

   });


  var AppView = Backbone.View.extend({
    el: "body",
    initialize: function() {

      var newsLists = new NewsListcolln(); 

      var newsView = new NewsListView({model: newsLists});

      newsLists.bind('reset', function () { newsView.render();});
      newsLists.fetch();
      }
  });

  var App = new AppView();


 /* var newsLists = new NewsListColln;
  var newsListView = new NewsListView({model: newsLists});

  newsLists.fetch({ url: "http://api.divum.in/training/json/newslist.php", success: function() {
    console.log(newsLists);
  }});

  newsLists.bind('reset', function () { newsListView.render(); });*/

  /*
   render:function(){

        this.$("news-list").append(newsView.render().el);
      }*/

});

css-- newsList.css文件

body {
        padding:0px;
        margin: 0px;
        background-color: black;
        color:white;
    }

h1 {
    padding:5px;
    margin: 0;
    background-color: #FFFF00;
    color:black;`enter code here`
}

h3{
    margin: 0;
    background-color:#FFFF00;
    color:black;
}

h2{
    padding:5px;
    margin:0px;
    background-color: white;    
    color:black;
}

.container {
    color:white;
}

div img {
    float: left;
    width: 128px;
    height:: 85%;   

}

.container section{
    margin-left:128px;
}

#footer{
    position: fixed;
    width: 100%;
    bottom: 0px;    
}

#center_text{
    text-align:center;
}

#left_text{
    text-align:left;
}

div p{
    text-align: right;
}
.clearfix{
    overflow: auto;
}

Answer 1

错误：

网站返回一个对象，但集合是数组。在这种情况下，您需要使用模型。
render是一个函数，因此您必须调用它：this.render();
将模型传递给视图后，通过this.model。
如果您想单独获取模型，模型需要url或urlRoot设置
fetch是异步的，你必须等到它完成。
使用.get()访问模型属性

工作代码：http://jsfiddle.net/FHsrL/1/

骨干中的简单SPA示例

1 个答案: