Haml form_tag 正在破坏 javascript答案

【问题标题】：Haml form_tag is breaking javascriptHaml form_tag 正在破坏 javascript
【发布时间】：2016-07-02 22:14:06
【问题描述】：

我有一些通过 javascript 加载的 haml 代码，用于将单元格和行添加到表中。我有它提交表单时它在页面上完成所有操作而无需重新加载整个页面。除了表单标签外，我一切正常。我在不同的页面上遇到了这个问题，解决方案是用 erb 而不是 haml 重写它。 haml form_tag 从 javascript 中转义。

这是我的代码

    -@products.each do |product|
        -if product[:suggested_category_id].nil?
            -pid = nil
            -cid = nil
            -save = nil
            -form = nil
        -else
            -form = form_tag("update_product_category",:method => :put, remote: true)
            -pid = hidden_field_tag("product_id", value = product[:id])
            -cid = hidden_field_tag("category_id", value = product[:suggested_category_id])
            -save = submit_tag "Save"
        -if product[:suggested_category_name].nil?
            -name = nil
        -else
            -name =link_to product[:suggested_category_name], "change_category/#{product[:id]}", id: product[:id], remote: true
        :plain
            var table = document.getElementById("product_table");
            var row = table.insertRow();

            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            row.appendChild('#{form}');

            cell3.className = '#{product[:id]}';
            cell4.className = '#{product[:id]}';
            cell5.className = '#{product[:id]}';

            cell1.innerHTML = "#{product[:barcode]}";
            cell2.innerHTML = "#{product[:name]}";
            cell3.innerHTML = '#{name}';
            cell4.innerHTML = '#{product[:suggested_category_permalink]}';
            cell5.innerHTML = '#{pid}#{cid}#{save}';

    -if @db_products.next_page
        :plain
            $('.pagination').replaceWith('#{will_paginate(@db_products)}');
    -else
        :plain
            $('.pagination').remove();

以下是回复：

var table = document.getElementById("product_table");
var row = table.insertRow();

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
row.appendChild('<form accept-charset="UTF-8" action="update_product_category" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="blmkKSyMOJHGiYIJZ+/G6DBUNZw7LHMK5MasdPFsol8=" /></div>
');

cell3.className = '648878';
cell4.className = '648878';
cell5.className = '648878';

cell1.innerHTML = "710425394065";
cell2.innerHTML = "Mafia II (Xbox 360)";
cell3.innerHTML = '<a href="change_category/648878" data-remote="true" id="648878">consoles</a>';
cell4.innerHTML = 'video-games/xbox-360/consoles';
cell5.innerHTML = '<input id="product_id" name="product_id" type="hidden" value="648878" /><input id="category_id" name="category_id" type="hidden" value="17983" /><input name="commit" type="submit" value="Save" />';

请注意 Haml 如何在 row.appendChild 的表单中插入新行。有没有办法切换 haml 以不添加它自己的换行符？

【问题讨论】：

标签： javascript jquery ruby-on-rails haml

【解决方案1】：

您可以使用escape_javascript/j 辅助方法。然后要使用appendChild，您必须先创建一个元素，例如div。您可能想从以下内容开始：

...
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var div = document.createElement('div');
div.innerHTML = '#{j form}';
row.appendChild(div);

【讨论】：

【解决方案2】：

我发现的答案是 Haml 不能很好地与 javascript 配合使用。如果你有一个 js 文件，它应该是一个 Erb 文件。所以应该是 your_file.js.haml，而不是 your_file.js.erb。

【讨论】：