模板标签不起作用Underscore / Backbone

时间:2017-08-16 18:18:12

标签: javascript jquery backbone.js underscore.js

我正在使用Backbone和Underscore尝试显示帖子列表。我创建了两个视图,一个用作帖子的容器,另一个用于显示帖子本身。我试图使用Underscore的模板标签,但我遇到了一个奇怪的问题。标签似乎不起作用。

我按顺序加载了我的库,位于我的html btw的顶部。

关于我做错了什么建议?

Issue

以下是我的观点......

var ListContainerView = SOCIView.extend({
  el: $(".display_body")
  template: _.template($('#ListContainerView').html()),

  initialize: function () {
      _.bindAll(this, "render", "addAll");
      this.collection.bind("reset", this.render);
  },

  render: function(){
      $(this.el).html(this.template());
      this.addAll();
  },

  addAll: function () {
      this.collection.each(this.addOne);
  },

  addOne: function (model) {
      view = new ListItemView({ model: model });
      $("ul", this.el).append(view.render());
  }

});




var ListItemView = SOCIView.extend({ 
  tagName: "li",
  template: _.template($("#ListItemView").html()),

  initialize: function () {
      _.bindAll(this, 'render');
  },

  render: function () {
      return $(this.el).append(this.template(this.model.toJSON())) ;
  }

});

如果需要我的数据......

[
  {
    "id":"1",
    "schedule":"2020-0417 17:00:00",
    "utc_offset":"420",
    "project_id":"1",
    "network":"facebook",
    "network_name":"TestFacebookPage",
    "network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7","message":"Test Post 1 (just text, approved)",
    "data":[],
    "customer_approved":"1",
    "manager_approved":"1",
    "rejection_message":"",
    "created_at":"2020-0413 17:41:03",
    "created_by":"admin",
    "created_by_id":"1",
    "created_by_name":"John Admin"
},

{
    "id":"2",
    "schedule":"2020-0419 19:00:00",
    "project_id":"1",
    "network":"facebook",
    "network_name":"TestFacebookPage",
    "network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7",
    "message":"Test Post 2 (text with image, approved)  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "data":{"pictures":["https://pbs.twimg.com/media/C9T6n0UUwAAOBaU.jpg"],"image_added":"true","picture":"https://pbs.twimg.com/media/C9T6n0UUwAAOBaU.jpg","type":"photo"},
    "customer_approved":"1",
    "manager_approved":"1",
    "rejection_message":"",
    "rejection_message_manager":"",
    "created_at":"2020-0413 17:42:34",
    "created_by":"admin",
    "created_by_id":"1",
    "created_by_name":"John Admin"
},

{
    "id":"3",
    "schedule":"2020-0421 22:00:00",
    "network":"facebook","network_name":
    "TestFacebookPage","network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7",
    "message":"Test Post 3 (link, approved) http://www.adultswim.com/videos/rick-and-morty/",
    "data":{"image_added":"true","pictures":["http://i.cdn.turner.com/adultswim/big/img/2015/07/17/Rick%26MortyS02_fbsearchTn.jpg"],"picture":"http://i.cdn.turner.com/adultswim/big/img/2015/07/17/Rick%26MortyS02_fbsearchTn.jpg","link":"http://www.adultswim.com/videos/rick-and-morty/","name":"Watch Rick and Morty on Adult Swim","caption":"www.adultswim.com","description":"Every episode of Rick and Morty is now on AdultSwim.com for free. Rick is a mad scientist who drags his grandson, Morty, on crazy sci-fi adventures. Their escapades often have potentially harmful consequences for their family and the rest of the world. Join Rick and Morty on AdultSwim.com as they trek through alternate dimensions, explore alien planets, and terrorize Jerry, Beth, and Summer.","domain":"www.adultswim.com","type":"link"},
    "customer_approved":"1",
    "manager_approved":"1",
    "rejection_message":"",
    "created_at":"2020-0413 17:43:29",
    "created_by":"admin",
    "created_by_id":"1",
    "created_by_name":"John Admin"
},

{
    "id":"4",
    "schedule":"2020-0424 17:00:00",
    "network":"facebook",
    "network_name":"TestFacebookPage",
    "network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7",
    "message":"Test Post 4 (text, pending)",
    "data":[],
    "customer_approved":"0",
    "manager_approved":"1",
    "rejection_message":"",
    "created_at":"2020-0413 17:43:48",
    "created_by":"admin",
    "created_by_id":"1",
    "created_by_name":"John Admin"
},

{
    "id":"5",
    "schedule":"2020-0426 19:00:00",
    "network":"facebook",
    "network_name":"TestFacebookPage",
    "network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7",
    "message":"Test Post 5 (picture, pending)",
    "data":[],
    "customer_approved":"0",
    "manager_approved":"1",
    "rejection_message":"",
    "created_at":"2020-0413 17:44:03",
    "created_by":"admin",
    "created_by_id":"1",
    "created_by_name":"John Admin"
},

{
    "id":"6",
    "schedule":"2020-0428 21:00:00",
    "network":"facebook",
    "network_name":"TestFacebookPage",
    "network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7",
    "message":"Test Post 6 (link, pending) https://www.reddit.com/",
    "data":{
        "image_added":"true",
        "pictures":["https://b.thumbs.redditmedia.com/2Hwaff37fC4f37j-3orrbjVAOVBChqbdm_dXeIhjlNw.jpg"],
        "picture":"https://b.thumbs.redditmedia.com/2Hwaff37fC4f37j-3orrbjVAOVBChqbdm_dXeIhjlNw.jpg",
        "link":"https://www.reddit.com/",
        "name":"reddit: the front page of the internet",
        "caption":"www.reddit.com",
        "description":"reddit: the front page of the internet",
        "domain":"www.reddit.com",
        "type":"link"
        },
    "customer_approved":"0",
    "manager_approved":"1",
    "rejection_message":"",
    "created_at":"2020-0413 17:44:19",
    "created_by":"admin",
    "created_by_id":"1",
    "created_by_name":"John Admin"
  }
]

0 个答案:

没有答案