Rewrite zones.js.coffee using Backbone.js

backend/app/assets/javascripts/spree/backend/namespaces.js

@@ -3,6 +3,7 @@ _.extend(window.Spree, {
   Collections: {},
   Views: {
     Order: {},
-    Cart: {}
+    Cart: {},
+    Zones: {}
   }
 })

backend/app/assets/javascripts/spree/backend/views/index.js

@@ -8,3 +8,4 @@
 //= require 'spree/backend/views/order/customer_select'
 //= require 'spree/backend/views/order/summary'
 //= require 'spree/backend/views/state_select'
+//= require 'spree/backend/views/zones/form'

backend/app/assets/javascripts/spree/backend/views/zones/form.js

@@ -0,0 +1,16 @@
+Spree.Views.Zones.Form = Backbone.View.extend({
+  events: {
+    'click [name="zone[kind]"]': 'render'
+  },
+
+  render: function() {
+    var kind = this.$('[name="zone[kind]"]:checked').val() || 'state';
+    this.$('[name="zone[kind]"]').val([kind]);
+
+    $('#state_members').toggleClass('hidden', kind !== 'state');
+    $('#state_members :input').prop('disabled', kind !== 'state');
+
+    $('#country_members').toggleClass('hidden', kind !== 'country');
+    $('#country_members :input').prop('disabled', kind !== 'country');
+  }
+})

backend/app/assets/javascripts/spree/backend/zone.js

@@ -0,0 +1,8 @@
+$(function(){
+  if($('.js-zones-form').length) {
+    var view = new Spree.Views.Zones.Form({
+      el: $('.js-zones-form')
+    });
+    view.render()
+  }
+});

backend/app/views/spree/admin/zones/_form.html.erb

@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row js-zones-form">
   <div class="col-xs-5">
 
     <div data-hook="admin_zone_form_fields">