wesm87
1/25/2016 - 9:25 PM

WordPress + CoffeeScript + Backbone

WordPress + CoffeeScript + Backbone

# Root object
root = exports ? module.exports ? self ? this

# Replace `plugin_slug` below with whatever you used in `wp_localize_script()`
# The `||= {}` at the end will assign an empty object to `root.plugin_slug` if it doesn't already exist.
app = root.plugin_slug ||= {}

# Dependencies
$        = root.jQuery ? root.$
_        = root._
Backbone = root.Backbone

# Template mixin
app.WP_Template_Mixin = {
  # The container variable you want to use in your template, if any.
	template_var: null

	# The ID of the script element that contains the template.
	template_id:  null

	# Copy WordPress template settings.
	template_settings:
		variable:    'data'
		evaluate:    /<#([\s\S]+?)#>/g
		interpolate: /\{\{\{([\s\S]+?)\}\}\}/g
		escape:      /\{\{([^\}]+?)\}\}(?!\})/g

	# Put it all together for a slightly customized version of `wp.template`.
	template: ->
		$template = $("#tmpl-#{@template_id}")

		return unless $template.length

		settings = @template_settings
		settings.variable = @template_var if @template_var

		# Compile the template and return the result.
		return _.template($template.html(), @template_settings)() 
}
# Root object
root = exports ? module.exports ? self ? this

# Replace `plugin_slug` below with whatever you used in `wp_localize_script()`
# The `||= {}` at the end will assign an empty object to `root.plugin_slug` if it doesn't already exist.
app = root.plugin_slug ||= {}

# Dependencies
$        = root.jQuery ? root.$
_        = root._
Backbone = root.Backbone

# AJAX mixin
app.WP_AJAX_Mixin = {
  ###
	## Backbone assumes you're using a RESTful interface when making AJAX calls.
	## WP ajax callback URLs don't follow this pattern, so we need to override
	## `Backbone.sync` to make it play nice with WordPress.
	###
	sync: (method, object, options) ->
		backbone_sync = Backbone.sync

		options.data = {} unless options?.data?
		json = object.toJSON()

		if json instanceof Array
			formatted_json = models: json
		else
			formatted_json = model: json

		_.extend(options.data, formatted_json)

		options.emulateJSON = true

		return backbone_sync.call(this, 'create', object, options)

	###
	## The `wp_send_json*` functions wrap the return data in `response.data`.
	## Here we pull our updated model attributes out of `response.data` if it
	## exists; otherwise we end up putting everything in one `data` attribute.
	###
	parse: (response) ->
		return response.data if response?.data?
		return response
}
# Root object
root = exports ? module.exports ? self ? this

# Replace `plugin_slug` below with whatever you used in `wp_localize_script()`
# The `||= {}` at the end will assign an empty object to `root.plugin_slug` if it doesn't already exist.
app = root.plugin_slug ||= {}

# Dependencies
$        = root.jQuery ? root.$
_        = root._
Backbone = root.Backbone

# Base view
app.Base_View = Backbone.View.extend(
  _.extend(app.WP_Template_Mixin,
    # Add any other base methods / properties you want here.
  )
)
# Root object
root = exports ? module.exports ? self ? this

# Replace `plugin_slug` below with whatever you used in `wp_localize_script()`
# The `||= {}` at the end will assign an empty object to `root.plugin_slug` if it doesn't already exist.
app = root.plugin_slug ||= {}

# Dependencies
$        = root.jQuery ? root.$
_        = root._
Backbone = root.Backbone

# Base model
app.Base_Model = Backbone.Model.extend(
  _.extend(app.WP_AJAX_Mixin,
    # Add any other base methods / properties you want here.
  )
)
# Root object
root = exports ? module.exports ? self ? this

# Replace `plugin_slug` below with whatever you used in `wp_localize_script()`.
# The `||= {}` at the end will assign an empty object to `root.plugin_slug` if it doesn't already exist.
app = root.plugin_slug ||= {}

# Dependencies
$        = root.jQuery ? root.$
_        = root._
Backbone = root.Backbone

# Base collection
app.Base_Collection = Backbone.Collection.extend(
  _.extend(app.WP_AJAX_Mixin,
    # Add any other base methods / properties you want here.
  )
)