Last active
November 10, 2017 17:53
-
-
Save wesm87/319ee2c5c5406aff42cf to your computer and use it in GitHub Desktop.
WordPress + CoffeeScript + Backbone
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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. | |
) | |
) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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. | |
) | |
) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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. | |
) | |
) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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