javascript - Haml form_tag 正在破坏 javascript

Question

我有一些 haml 代码，正在通过 javascript 加载，以将单元格和行添加到表中。我把它放在提交表单时，它在页面上完成所有操作，而无需重新加载整个页面。除了表单标签之外，我的一切都正常。我在另一个页面上遇到了这个问题，解决方案是在 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 不添加它自己的换行符？

Answer 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);