Question

在Rails应用程序中，我有一个Coffeescript函数，除其他外，它会渲染一些HTML并将其添加到DOM中。

# inject.js.coffee
(($) ->
  # some actions
  html_string = '<div><p>My complex HTML</p></div>'
  inject_node[0].innerHTML += html_string

此HTML也以部分编码并在其他地方使用。

# model/_inject.html.erb
  <div><p>My complex HTML</p></div>

有没有办法通过调用coffeescript中的partial来干掉这段代码？

此事件未通过控制器操作，因此在这种情况下我不认为action.js部分将起作用。

我研究过的一种方法是将partial作为数据属性中的字符串呈现，并将其传递给coffeescript

返回

undefined method `render_as_string' for #<#<Class:0x007fbd4b633d68>:0x007fbd4b617f50>

我也试过

<%= content_tag :div, id: "partial", data: { partial: escape_javascript(render( partial: 'model/inject' )).to_s } do %>
<% end %>

但这是渲染部分，而不是作为数据属性显示。

有没有办法在coffeescript中使用partial，而不重复渲染的HTML？

作为背景，我正在实施blueimp gallery，我想添加additional gallery element。这个元素在`_inject.html.erb＆＃39;中描述。部分。

该页面包含以下内容：

<div id="links">
    <a href="images/banana.jpg" title="Banana" data-partial="This is where I want to render a partial as text">Banana</a>
    <a href="images/apple.jpg" title="Apple" data-description="This is where I want to render a partial as text">Apple</a>
</div>

单击图像链接会调用以下函数

blueimp.Gallery(
    document.getElementById('links'),
    {
        onslide: function (index, slide) {
            var partial = this.list[index].getAttribute('data-partial'),
                node    = this.container.find('.partial');
            node.empty();
            if (partial) {
                node[0].innerHTML += partial;
            }
        }
    }
);

显示以下盲人

<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <!-- The placeholder for the description label: -->
    <div class="partial"></div>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

Answer 1

我认为最好的方法是通过控制器。如果这不适合您，请告诉我，我会提出另一种解决方案，无需额外请求即可使用。

理想的方法是启动ajax请求，该请求将在js.erb中呈现部分并在响应中将其作为js发送。然后，您可以在js.erb中为您编写DOM插入逻辑，当您作为响应收到它时，它将在您的浏览器中执行。

$('selector').html("<%= j render partial: 'model/inject' %>");

为了告诉控制器将响应发送为js，您必须为ajax调用添加新的操作和路由，并在操作中写下以下内容：

respond_to do |format|
    format.js
end

这将在您的控制器的views目录中查找您的action_name.js.erb文件。您可以像这样从您的咖啡发送ajax电话：

$.ajax
    url: '/controllers/action'
    dataType: 'script'

更新回答

查看更新的代码，我建议您在单独的div而不是元素的data属性中呈现部分内容。

<div id="hidden_div" class="hidden">
    <%= render partial: 'model/inject' %>
</div>

由于内容包含非编码的html字符，浏览器会在响应中收到部分文本后将其视为html。

在隐藏 div中渲染此部分，然后按如下方式选择它可能会有效：

html_to_be_inserted = $('#hidden_div').html()

另一个选项

在渲染data属性中的部分时，您也可以尝试使用它来转义html字符：

<%=h render partial: 'model/inject' %>

让我知道它是怎么回事！

如何在Coffeescript函数中使用HTML部分？

1 个答案: