HAML multi-line attribute values

Question

I am using KnockoutJS, which uses the json string in the data-bind attribute to indicate the binding information. I also like to use HAML.

This line can quickly become quite long, for example: -

 %ul#task-list.unstyled{"data-bind" => "template: { name : 'taskHierarchy', foreach : contexts.children(), afterAdd: function(elem) { $(elem).hide().slideDown() } }"} 

The solution is to use the :plain filter as follows (slightly different from the previous one): -

 :plain <div data-bind = "template: { name: 'twoLineResourceTemplate', foreach: resources, afterAdd: function(elem) { $(elem).hide().slideDown() } }"> </div> 

Is there an easier way to do this using HAML constructs instead of a filter?

I tried using the pipe symbol, but it does not work for HAML attributes.

Thanks!

Answer 1

I tried pipe designation and this works for me:

 %ul#task-list.unstyled{"data-bind" => | "template: { " + | "name : 'taskHierarchy'," + | "foreach : contexts.children()," + | "afterAdd: function(elem) {" + | "$(elem).hide().slideDown()" + | "} }"} | 

Answer 2

You can try this post on KnockoutJS and unobtrusive JavaScript.