Backbone-forms + Zepto fails to render

Question

i'm developing an app for Blackberry OS5 using Phonegap + Zepto + Backbone. In order to do so, I've been using Backbone-forms to handle submition but since OS5 has problems with jQuery version higher than 1.4.4, i moved to Zepto, but the render method on BackboneForms stop working, could anyone help me with it?

Here it's the section where it breaks, for full code please check here https://github.com/powmedia/backbone-forms:

render: function() {
  var self = this,
      options = this.options,
      template = Form.templates[options.template];

  //Create el from template - HERE IT BREAKS
  var $form = $(template({
    fieldsets: '<b class="bbf-tmp"></b>'
  }));

  //Render fieldsets
  var $fieldsetContainer = $('.bbf-tmp', $form);

  _.each(options.fieldsets, function(fieldset) {
    $fieldsetContainer.append(self.renderFieldset(fieldset));
  });

  $fieldsetContainer.children().unwrap();

  //Set the template contents as the main element; removes the wrapper element
  this.setElement($form);

  if (this.hasFocus) this.trigger('blur', this);

  return this;
},

Thanks in advance!

Answer 1

Zepto, backbone and underscore don't officially support the BB5.0 browser- BB5.0 has mango under the hood unlike BB6.0 upwards which has webkit. In addition to this I can say from my experience that the javascript support in BB5.0 is not great to say the least. So working this one out is a bit like finding a needle in a haystack.

A likely culprit is underscore which is what I see you are using for your templating. Underscore does not seem to handle templates with any kind of logic on BB5.0 (Any loops or if statements). So if you want to do anything more complex than basic data binding in the templates you are going to need to modify underscore or do your own templating solution.

Not sure if this is the kind of answer you wanted but hopefully it helps . . .

EDIT:

Re the underscore templating issue: there seems to be an issue with the native foreach implementation on BB OS5.0. Underscore calls this native foreach if available. Commenting out the following lines in underscore fixed our collection rendering in OS5.0:

/* if (nativeForEach && obj.forEach === nativeForEach) {
     obj.forEach(iterator, context);
} else */

Hope that helps.