0

I wanted to create widgets with repeatable fields for testimonials, time tables etc..

I recently stumbled up on this tutorial from codeable.io. I have some good experience with standard backbone.js as well. I completed the tutorial and implemented it.

This tutorial uses backbone.js/ underscore.js template engine to render repeatable fields.

Here is the widget code and corresponding backbone.js script.

However there is one problem that is making me sleepless since a week. Widget is working properly only after hitting the save button.

When the widget is added to a sidebar, Apart from the default testimonial, testimonials added with "add new testimonial" button are gone after hitting the save button. Functionality is working as expected only after manually hitting the save button. Only after hitting the save button, testimonials added with "add new testimonial" are saved.

After some trail and error i figured out that the problem is with widget id (possibly), when the template is rendered,widget-testimonials_widget-__i__ is printed in the javascript template instead of actual widget id like widget-testimonials_widget-5. But after hitting the save button, functionality is working as expected with actual widget id. This is my problem. and here is the screenshot.

The Problem. Look at the Chrome Dev Tools.

The functionality is working as expected in Proteus theme Cargo Press with out hitting the save button, although the code has several improvements like sanitization and code organization. This is screenshot of the proteus theme widget with widget id rendered properly immediately after adding widget to the sidebar. Here is the screenshot.

enter image description here

What should I do to render widget ID to a backbone.js / underscore template, immediately after adding the widget to a sidebar?

Improve this question

1 Answer 1

Reset to default
0

Found the solution, Finally got it to work.Use Mustache or Handlebars template system instead of underscore.js template system. Some how wordpress widget environment is not getting along with underscore template system.

Improve this answer
8
  • that is unlikely to be "the solution". Executing any type of script embedded in a widget is a bad idea. It might be that one library have harder time than others, but you are taking a risk with doing that. It might work with current version and break with the next
    – Mark Kaplun
    Commented Apr 29, 2017 at 17:57
  • you might want to read this to get insight on the why of the __i__ wordpress.stackexchange.com/questions/265170/…
    – Mark Kaplun
    Commented Apr 29, 2017 at 18:03
  • I can take the first comment as an answer. I always wanted to develop high standard wordpress themes. Since the above idea is coming a respectable site, I thought it is a good idea. Anyway, instead of Backbone or Angular, I will go with vanilla js to add repeating fields functionality to a widget. Thank you :)
    – Naresh Devineni
    Commented Apr 29, 2017 at 23:42
  • My JS framework mojo is very weak, so you should not trust me on that. I know that the customize team want to move into having widgets working with backbone and friends so maybe it s a good idea to pop up on the slack channel and ask there
    – Mark Kaplun
    Commented Apr 30, 2017 at 8:10
  • Yeah I will try that...between, Backbone, Handlebars, Widgets are playing nice with each other. After fixing the issue I have the tested the widget in various ways. It looks reliable :)
    – Naresh Devineni
    Commented Apr 30, 2017 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.