Question

我有一些通过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而不添加它自己的换行符？

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

Answer 2

我找到的答案是Haml在javascript方面表现不佳。如果你要有一个js文件，它应该是一个Erb文件。所以更确切地说，your_file.js.haml应该是your_file.js.erb。

Haml form_tag打破了javascript

2 个答案: