Question

这与我的previous post有关，在这里我试图使页面正常运行以进行脱机查看。

我认为我现在已经从概念上理解了我需要做的事情，如果我能弄清楚这个例子，我认为它是我解锁一切的关键：-）

这是问题的本质。我保存了一个由EmberJS应用程序渲染的页面。因此，我不需要该应用程序执行任何操作。相反，我只需要使用页面的jQuery功能即可。

实际上，这只是我认为的jQuery练习。看起来很简单，但是这个应用程序的各个奇怪方面似乎使事情变得困难。这是我需要对交互进行正确响应的HTML的示例（在这种情况下，只是一个简单的隐藏/显示功能）：

<div id="area49253971_6938" class="component interaction-component float-none clear-none  interaction_booted">
    <div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
    <div>
        <div class="data-field interaction-type">RevealContent</div>
        <div class="interaction_title"></div>
        <div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
            <div class="pointer">
                <td>
                    <div id="area49253971_6940" class="component image-component float-left clear-none  booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
                    <p class="body" id="area49253971_6941"><em><strong><a href="#">Some question</a></strong></em></p>
                </td>
            </div>
            <div style="display: block;">
                <td>
                    <p class="body" id="area49253971_6942"><strong>Some answer</strong></p>
                </td>
            </div>
        </div>
        <div class="interaction_data" style="display: none;">
            <div id="area49253971_6939" class="component table-component float-none clear-none ">
                <div class="component_caption"></div>
            </div>
        </div>
    </div>
</div>

请注意那些没有表父级的标签...更多有关此内容。

这是作用在此HTML上的requireJS模块：

define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function (exports, _jquery) {

  function RevealContent($el) {
    this.el = $el;

    this.interactionData = $el.find(".interaction_data");
    this.container = $el.find(".interaction_content");
  }

  RevealContent.prototype = {
    init: function init() {
      var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
      var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());

      this.container = this.container.parent().find('.RevealContent');

      this.container.append(initialContent);
      this.container.append(contentToReveal.hide());

      initialContent.click(function () {
        (0, _jquery["default"])(contentToReveal).slideToggle('slow');
      });

      // prevent any links within initialContent from navigating anywhere
      initialContent.find('a').click(function (e) {
        e.preventDefault();
      });
    }
  };

  exports["default"] = RevealContent;
});

我认为此导出数组在应用程序中用作模块加载器的一部分，并在应用程序启动的各个部分中使用。但就我而言，我只是想停用该应用程序，然后让jQuery完成它的工作。在上面的HTML中看到，类名中是否存在“ interaction_booted”？因此，我为离线保存的渲染HTML是应用程序完全渲染的结果。因此，我需要与任何应用程序特定的测试/检查/可变的通过/等离婚，并只修改上面的代码，以使 1）可以按较小的修改来编写或 2），我将其重写为普通的jQuery。

请牢记第二种方法（尽管最好使用选项1 ...），这是在将jQuery脚本引用添加到我的HTML之后的位置：

$(document).ready(function() {
    $(this).on('click', '.RevealContent', function () {
    console.log('made it here');
    });
    function RevealContent($el) {
        this.el = $el;

        this.interactionData = $el.find(".interaction_data");
        this.container = $el.find(".interaction_content");
    }

    RevealContent.prototype = {
        init: function init() {
            var contentToReveal = $('<div />').append($(this.interactionData.find('tdd')[1]).detach());
            var initialContent = $('<div class="pointer" />').append($(this.interactionData.find('tdd')[0]).detach());

            this.container = this.container.parent().find('.RevealContent');

            this.container.append(initialContent);
            this.container.append(contentToReveal.hide());

            initialContent.click(function () {
                $(contentToReveal).slideToggle('slow');
            });

            // prevent any links within initialContent from navigating anywhere
            initialContent.find('a').click(function (e) {
                e.preventDefault();
            });
        }
    };
});

注意，我将更改为。这样可以防止Chrome删除标签。我还相应地修改了上面的HTML。

将上面的代码插入HTML文件会使我进入此jQuery函数。但是，我不知道如何修改代码以保留所需的功能。我认为主要问题是

我不确定如何解释整个 prototype 和 init 业务，以及这是否是应用程序中的工件，requireJS或其他内容。
我认为 function RevealContent（$ el）是从应用程序中调用的，它是某种模块加载器或事件侦听器或某些东西的一部分，并且不确定是否需要上面复制的jQuery代码。

因此，总而言之，我正在尽力对这个东西进行逆向工程，但是我认为我对jQuery太缺乏经验，无法弄清楚它，所以很好奇是否有人轻易地知道要使它正常工作必须做什么。代码作为一个独立的块运行，不需要其他任何地方的输入，也不需要应用程序的任何接触点...

谢谢Brian，（对不起，如果我在这个主题上有太多类似的帖子，只是每天我都从不同的角度看待这个帖子，所以这个帖子代表了我目前的想法）

有人可以帮助对带有jQuery示例的RequireJS进行反向工程吗？

0 个答案: