JSFiddle - React, Tailwind, and code Playground

by jcreamer898

JavaScript

// Do something with this...
// "http://app.recruiterbox.com/widget/12766/openings/"


var Job = Backbone.Model.extend({
    defaults: {
        description: null,
        title: null,
        position_type: null,
        jobId: null,
        location: {
            city: null,
            state: null,
            country: null
        }
    },
    initialize: function() {
        this.slug = this.get("title").toLowerCase().replace(" ", "-");     
    },
});

var JobCollection = Backbone.Collection.extend({
    model: Job,
    url: 'http://app.recruiterbox.com/widget/12766/openings/'
});

var JobItemView = Backbone.View.extend({
    tagName: 'li',
    className: 'job-item',
    initialize: function() {
        // grab html
        var html = $('#job-listing').html();
        
        this.template = Handlebars.compile(html);
    },
    render: function() {
        var html = this.template(this.model.toJSON());
        
        console.log(this.model);
         
        this.$el.html(html);
         
        return this;   
    }
});

var JobListingView = Backbone.View.extend({
    tagName: 'ul',
    className: 'job-listing',
    initialize: function() {        
        this.collection.fetch({ 
                success: function() {
                    this.render();
                }.bind(this)
        });
    },
    render: function() {
        this.collection.each(function(item) {
            var jobItem = new JobItemView({ 
                model: item 
            });
            this.$el.append(jobItem.render().el);
        }.bind(this));
    }
});

var jobListingView = new JobListingView({
    collection: new JobCollection()
});

$(".content").append(jobListingView.el);

/*
description: ",
title: "Corporate Lawyer",
position_type: "Full-time",
application_fields: [],
job_code: "LNLY0953",
location: {},
id: 50802,
allows_remote: false
*/