HAML 中的多行属性值

发布于 2024-12-02 10:54:30 字数 650 浏览 4 评论 0原文

我正在使用 KnockoutJS，它使用 data-bind 属性中的 json 字符串来指示绑定信息。我也喜欢使用 HAML。

该字符串很快就会变得很长，例如：-

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

解决方案是使用 :plain 过滤器，如下所示（与上面略有不同）：-

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

是否有更简洁的方法来使用 HAML 构造来执行此操作过滤器的？

我尝试过使用管道字符，但它似乎不适用于 HAML 属性。

谢谢！

原文

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

This string 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() } }"}

A solution is to use the :plain filter as follows (slightly different from above):-

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

Is there a neater way to do this using HAML constructs instead of the filter?

I have tried using the pipe character but it does not seem to work for HAML attributes.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦巷 2024-12-09 10:54:30

我尝试了管道符号，它对我有用：

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

I tried the pipe notation and it works for me:

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

回复收藏 0 原文