Question

我有三个视图将JSON对象发布到后端以生成PDF。层次结构中的第一个工作，而不是另外两个。代码实际上是相同的，并使用相同的方法以编程方式添加带有JSON数据的隐藏输入字段。

我不能为我的生活找出问题所在。

首先我认为Knockout正在创建问题，因为在一个AJAX成功事件中，在foreach循环中添加了表单元素，但是在这方面每个视图都是相同的。

我已尝试过重命名的所有变体，我也试图以编程方式创建表单和输入，将它们附加到正文并提交。仍然只有第一部作品。

工作视图：

<div data-bind="visible: rep.messages().length > 0">
    <div data-bind="foreach: rep.messages">
        <div id="error" data-bind="css: color">
            <div><span data-bind="css: icon"></span></div>
            <div><div data-bind="html: text"></div></div>
            <div>
                <form action="/createPDF.html" method="POST" id="individlonpdf" name="loneandringar" target="_blank">
                    <span onclick=""></span>
                    <a href="javascript: void(0);" data-bind="click: $root.rep.print" id="print-tgl">Skriv ut</a>
                </form>
            </div>
        </div>
    </div>
</div>

不工作视图：

  <div data-bind="visible: rem.newEmployeeMessages().length > 0" id="rem-msg-area">
    <div data-bind="foreach: rem.newEmployeeMessages">
        <div id="error" data-bind="css: color">
            <div><span data-bind="css: icon"></span></div>
            <div><div data-bind="html: text"></div></div>
            <div>
                <form action="/createPDF.html" method="POST" id="ateranstallpdf" name="avanmalan" target="_blank">
                    <span onclick=""></span>
                    <a href="javascript: void(0);" data-bind="click: $root.rem.print" id="print-tgl">Skriv ut</a>
                </form>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT 然后将每个点击事件方法指向相同的打印方法

不-工作：

rem.print = function(){
    mainPdfPrint("ateranstallpdf", data, "avanmalan");
}

工作：

rep.print = function () {
    mainPdfPrint("individlonpdf", data, "loneandringar");
}

主要方法：

function mainPdfPrint(formid, datasource, name, stringified) {
    formid = "#" + formid;
    var url = $(formid).attr("action");
    var data = stringified ? datasource : JSON.stringify(datasource);

    var inp = $("<input>", { "value": data, "name": name, "type": "hidden" });
    if ($(formid + " input:hidden").length) {
        $(formid + " input:hidden").remove();
    }
    $(formid).append(inp);
    IK.global.logAnalytics(url);
    document.forms[name].submit();      
}

工作和非工作表单元素都是document.forms-collection的一部分。

任何建议都将不胜感激！

更新

在这里提出建议后，我尝试了另一种方法：

<div class="col-xs-12" id="" data-bind="visible:messages().length > 0">
                    <div data-bind="foreach: messages">
                        <div class="col-xs-12" id="error" data-bind="css:color">
                            <div class="col-xs-12 msg-templates">
                                <div class="col-xs-1 no-pad-l info-sign">
                                    <span class="glyphicon" data-bind="css:icon"></span>
                                </div>
                                <div class="col-xs-9 no-pad-l">
                                    <div class="col-xs-12 no-pad-lr msg" data-bind="html:text"></div>
                                </div>
                                <div class="col-xs-2 no-pad-lr text-right print">
                                    <form class="col-xs-12 no-pad-l" action="/foretag/individkort/skapaPdfAvanmalan.html" method="POST" id="avanmalanpdf" name="avanmalan" target="_blank">
                                        <span class="glyphicon glyphicon-print" onclick=""></span>
                                        <input type="hidden" name="avanmalan" data-bind="value:ko.toJSON($root.printableEmployee)" />
                                        <a href="javascript:void(0);" id="print-avanmalan" data-bind="click:$root.print">Skriv ut</a>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

然而问题仍然存在，但是在print方法中设置延迟会触发submit-event：

   self.print = function () {
        setTimeout(function () {
            document.forms.avanmalan.submit();
        }, 600);       
    }

Answer 1

你的方法表明你似乎并不熟悉淘汰赛，并尝试以“jQuery”的方式做太多。

使用淘汰赛，您的用户界面是您的视图模型的功能。 DOM中的所有更改都必须是基础数据更改的结果。使用JS代码手动添加输入字段的任务不是此方法的一部分。

在下文中，没有修改DOM的自定义代码。一切都是通过淘汰赛完成的。

var vm = {
  rep: {
    messages: [
      { color: '', icon: '', text: '<b>Message 1</b> - Text', data: 'some data here 1' },
      { color: '', icon: '', text: '<b>Message 2</b> - Text', data: 'some data here 2' },
      { color: '', icon: '', text: '<b>Message 3</b> - Text', data: 'some data here 3' }
    ]
  },
  catchPost: function () {
    // dummy function to prevent an actual form POST
    console.log("...would send the following data to the server:");
    console.log(ko.toJSON(this.data, null, 2));
    return false;    
  }
};

ko.applyBindings(vm);

button.submit {
  border: 0px none;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  background-color: transparent;
  color: blue;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="with: rep">
  <div data-bind="foreach: messages">
    <div id="error" data-bind="css: color">
      <div><span data-bind="css: icon"></span></div>
      <div><div data-bind="html: text"></div></div>
      <div>
        <form action="/createPDF.html" method="POST" target="_blank" data-bind="submit: $root.catchPost">
          <input type="hidden" name="loneandringar" data-bind="value: ko.toJSON(data)">
          <button class="submit" id="print-tgl">Skriv ut</button>
        </form>
      </div>
    </div>
  </div>
</div>

在如此简单的场景中，不需要任何自定义代码。除非你对jQuery UI（或类似的库）有明确的依赖，否则我建议你从你的应用程序中删除jQuery。如果需要，您可以使用专用的Ajax库 - 例如reqwest - 但一般来说，jQuery不仅仅是对淘汰应用程序的帮助。

淘汰为什么我的第一个form.submit工作但不是其他？

1 个答案: