Symfony 最佳实践 - 使用 Materialise CSS Chips 和 Symfony 表单答案

【问题标题】：Symfony best practice - using Materialize CSS Chips with Symfony FormsSymfony 最佳实践 - 使用 Materialise CSS Chips 和 Symfony 表单
【发布时间】：2017-02-15 15:10:37
【问题描述】：

我在 Symfony 3 中开始了一个项目，该项目需要允许用户使用一些数据和一组标签（多对多）创建帖子。我一直在使用的 CSS 框架是 MaterializeCSS，有一个名为 'chips' 的 handy class 可以很好地允许输入标签。

到目前为止，我一直按照 Symfony 指南使用 Form 对象，没有任何问题，但我的问题是物化 CSS 构造它的“芯片”字段，如下所示：

  <div class="chips"></div>

...

  $('.chips').material_chip();

我一辈子都看不到如何在 Symfony 表单中执行此操作，或者如果使用自定义表单呈现完成，如何在提交后检索数据。我不能使用它，但用户体验会受到影响。我已经阅读了一些关于 Symfony 内部的 CollectionType 类的信息，但我仍然不确定这是否适合与芯片一起使用。

我敢肯定，以前有人完成过这样的项目，如果能提供一些意见，那就太好了。感谢所有帮助。

【问题讨论】：

我认为你需要添加一个隐藏的输入和芯片来处理这个问题检查这个jsbin.com/yoxupumapo/edit?html,console,output
这工作得很好，只需要覆盖另一边的表单处理方式。如果你想在下面提交这个作为答案，我会接受它（这样你就可以获得适当的信用），否则我可以自己回答 q 并引用你的评论。

标签： javascript forms symfony materialize

【解决方案1】：

你尝试过这样的事情吗？

{{ form(form.name, { 'attr': {'class': 'chips'} }) }}

我建议你阅读这篇post

【讨论】：

是的，对不起。我的理解是，表单定制是基于向<input /> 标签添加属性，而 Materialize 的芯片不是基于输入，而是基于<div>。我在网站上自定义了很多其他表单，但 Materialise 的芯片似乎是另一种动物。
如果没有你可以尝试制作没有 symfony 表单的表单，只需在 html 中制作它们并使用 JavaScript 或任何 Js 框架向 php 发送请求，这种方式对用户更友好，因为你不需要需要加载所有页面。

【解决方案2】：

正如我们上面所讨论的，我们的想法是使用一些胶水 js 代码来操作一个隐藏字段，该隐藏字段包含作为逗号分隔值的标签，并将芯片小部件与该隐藏字段绑定为数据源和目标，例如

所需的html

  Input field(might be hidden):
  <input name="chips" value="Apple,Hello,World">

  The Chip:
  <div class="chips"/>

胶水js

<script>
     function updateChipInput(chip){
       var newval= $(chip).material_chip('data')
          .reduce(function(result,val){ result.push(val.tag); return result;},[]).join(",")

       $('input[name="chips"]').val(newval);
     }

    $(document).ready(function(){
     var data= $('input[name="chips"]').val().split(',') 
       .map(function(tag){
         return {tag:tag}
       })

     $('.chips').material_chip({
       data: data          
    });

     $('.chips').on('chip.add', function(e, chip){
       updateChipInput(this);
    })
     .on('chip.delete', function(e, chip){
       updateChipInput(this);
    });  
   });
  </script>

working demo

输入是文本字段以显示示例中的效果，您可以将其类型设置为隐藏，谢谢

【讨论】：

通过自定义表单类型实现此物化芯片版本的正确方法是什么？我们可以基于选择/实体类型吗？