Skip to content

Instantly share code, notes, and snippets.

@wesm87
Last active November 10, 2017 17:53
Show Gist options
  • Save wesm87/319ee2c5c5406aff42cf to your computer and use it in GitHub Desktop.
Save wesm87/319ee2c5c5406aff42cf to your computer and use it in GitHub Desktop.
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
# Base collection
app.Base_Collection = Backbone.Collection.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 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 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
# 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
# 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)()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment