Javascript 显示具有特定条件的帖子总数

我试图过滤我收集的数据，但我似乎不知道如何完成显示

• “批准”职位总数：
  

  customer\u approved

  和

  manager\u approved

  值等于1的帖子
• “待定”职位的数量：
  

  customer\u approved

  或

  manager\u approved

  （或两者）等于0
• “被拒绝”的帖子数量：
  

  customer\u approved

  或

  manager\u approved

  （或两者）等于-1

这看起来很简单，但尝试在主干中完成数据过滤对我来说是一个挑战

我试图在我的视图和HTML中应用逻辑，但运气不好

以下是我的数据/收集：

var ListItemCollection = Backbone.Collection.extend({
    baseUrl: '/api/get_accounts',
    url: '/api/get_accounts',
    model: ListItemModel,
    total: 0,
    // Sample data
    TESTDATA: {"status":"ok","posts":[{"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"}],"total":"6"},

    initialize: function(models, options) {
      this.total = this.TESTDATA.total;
      this.reset(this.TESTDATA.posts);
         console.log(this.models);
    }

});

---

要仅筛选经理批准和客户批准的帖子，请尝试使用：

---

要仅筛选经理批准和客户批准的帖子，请尝试使用：

---

主干代理集合上下划线的许多函数，其中一个是：

countBycountBy（列表，迭代对象，[context]）
将列表按组排序，并返回每个组中对象数的计数。 与groupBy类似，但不是返回值列表，而是返回 该组中的值数的计数

这意味着您可以按州对模型进行分组，并获得每个桶的计数

对您的收藏定义稍作修改

var ListItemModel = Backbone.Model.extend();
var ListItemCollection = Backbone.Collection.extend({
    model: ListItemModel,
    total: 0,

    parse: function(data) {
        // parse lets you reinterpret your data
        this.total = data.total;
        return data.posts;
    }
});

然后，您可以使用

var c = new ListItemCollection(TESTDATA, {parse: true});
var states = c.countBy(function(model) {
    var manager = +model.get("manager_approved"), 
    customer = +model.get("customer_approved");

    if ((manager === -1) || (customer === -1)) return 'rejected';
    if ((manager === 1) && (customer === 1)) return 'approved';
    return 'pending';
});

还有一个演示

var TESTDATA={“status”：“ok”，“posts”：[{“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“，“消息”：“测试帖子1（仅文本，已批准）”，“数据”：[]，“客户已批准”：“1”，“经理已批准”：“1”，“拒绝消息”：“创建人”：“2020-0413 17:41:03”，“创建人”：“管理员”，“创建人id”：“1”，“创建人姓名”：“约翰管理员”}，{“id”：“2”，“时间表”：“2020-0419:00:00”，“项目id”：“1”，“网络”：“facebook”，“网络名”：“TestFacebookPage”，”网络“拇指”：”https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7“，”消息“：”测试柱2（带图像的文本，已批准）知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德如果你不轻率，就必须为自己的行为负责。”，“数据”：{“图片”：[”https://pbs.twimg.com/media/C9T6n0UUwAAOBaU.jpg“]，“添加图像”：“真实”，“图片”：”https://pbs.twimg.com/media/C9T6n0UUwAAOBaU.jpg，“类型”：“照片”}，“客户批准”：“1”，“经理批准”：“1”，“拒绝消息”：”拒绝信息管理员“：”创建人“：”2020-0413 17:42:34“，”创建人“：”管理员“，”创建人id“：”1“，”创建人姓名“：”约翰管理员“}，{”id“：”3“，”日程安排“：”2020-0421 22:00:00“，”网络“：”facebook“，”网络名称“：”TestFacebookPage“，”网络拇指“：”https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7“，”消息“：”测试桩3（链接，已批准）http://www.adultswim.com/videos/rick-and-morty/“，”数据“：{”图像添加“：”真“，”图片“：[”http://i.cdn.turner.com/adultswim/big/img/2015/07/17/Rick%26MortyS02_fbsearchTn.jpg“]，“图片”：http://i.cdn.turner.com/adultswim/big/img/2015/07/17/Rick%26MortyS02_fbsearchTn.jpg，“链接”：http://www.adultswim.com/videos/rick-and-morty/“，”姓名“：”观看Rick和Morty的成人游泳“，”说明“：”www.adultswim.com“，”描述“：”Rick和Morty的每一集现在都在AdultSwim.com上免费播放。Rick是一位疯狂的科学家，他拖着他的孙子Morty进行疯狂的科幻冒险。他们的出轨行为通常会对他们的家庭和世界其他地方造成潜在的有害后果。加入Rick和Morty在AdultSwim.com上的行列，让他们跋涉穿越不同的维度，探索外星人pl“域名”：“www.adultswim.com”，“键入”：“link”}，“客户批准”：“1”，“经理批准”：“1”，“拒绝消息”：“创建地址”：“2020-0413 17:43:29”，“创建人”：“管理员”，“创建人id”：“1”，“创建人姓名”：“约翰管理员”}，{“id”：“4”，“时间表”：“2020-0424 17:00:00”，“网络”：“facebook”，“网络名”：TestFacebookPage，“网络用户”：https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7“，”消息“：”测试桩4（文本，待定）”，”数据“：[]，”客户批准“：”0“，”经理批准“：”1“，”拒绝消息“，”创建时间“：”2020-0413 17:43:48“，”创建人“：”管理员“，”创建单位id:“：”1“，”创建单位名称:”John Admin“}，“{”id:”5“，”时间表:”2020-0426 19:00:00“，”网络“：”facebook“，”网络名称“：”TestFacebookPage“，”网络拇指“：”https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7，“消息”：“测试桩5（图片，待定）”，“数据”：[]，“客户批准”：“0”，“经理批准”：“1”，“拒绝邮件”：“创建时间”：“2020-0413 17:44:03”，“创建人”：“管理员”，“创建人id”：“1”，“创建人姓名”：“John admin”}，{“id”：“6”，“日程安排”：“2020-0428 21:00:00”，“网络”：“facebook”，“网络名称”：“TestFacebookPage”，“网络拇指”："https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7“，”消息“：”测试桩6（链接，待定）https://www.reddit.com/“，”数据“：{”image_添加“：”真“，”图片“：[”http
var c = new ListItemCollection(TESTDATA, {parse: true});
var states = c.countBy(function(model) {
    var manager = +model.get("manager_approved"), 
    customer = +model.get("customer_approved");

    if ((manager === -1) || (customer === -1)) return 'rejected';
    if ((manager === 1) && (customer === 1)) return 'approved';
    return 'pending';
});