将 XML 转换为 CSV 时如何使用 knockoutJS？

Question

我创建了一个应用程序，我想在屏幕上将 XML 文件转换为 CSV 格式。我已经通过 JavaScript 完成了，但我想同样使用 KnockoutJS。我是 Knockout 的新手，所以没有足够的想法来实现它。

谁能告诉我如何在这里使用 knockout 吗？

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script type='text/javascript' src="https://cdn.rawgit.com/abdmob/x2js/master/xml2json.js"></script>

<script>
function xmlTocsv() {
debugger;
    var data = $("#xmlArea").val();

    var xml = "";

    if (data !== null && data.trim().length !== 0) {
debugger;
        try {
            xml = $.parseXML(data);
        } catch (e) {
            throw e;
        }

        var x2js = new X2JS();

        data = x2js.xml2json(xml);
        jsonTocsvbyjson(data);

    }
}

function jsonTocsvbyjson(data, returnFlag) {
debugger;
    arr = [];
    flag = true;

    var header = "";
    var content = "";
    var headFlag = true;

    try {

        var type1 = typeof data;

        if (type1 != "object") {
            data = processJSON($.parseJSON(data));
        } else {
            data = processJSON(data);
        }

    } catch (e) {
        if (returnFlag === undefined || !returnFlag) {
            console.error("Error in Convert to CSV");
        } else {
            console.error("Error in Convert :" + e);
        }
        return false;
    }

    $.each(data, function(k, value) {
        if (k % 2 === 0) {
            if (headFlag) {
                if (value != "end") {
                    header += value + ",";
                } else {
                    // remove last colon from string
                    header = header.substring(0, header.length - 1);
                    headFlag = false;
                }
            }
        } else {
            if (value != "end") {
                var temp = data[k - 1];
                if (header.search(temp) != -1) {
                    content += value + ",";
                }
            } else {
                // remove last colon from string
                content = content.substring(0, content.length - 1);
                content += "\n";
            }
        }

    });

    if (returnFlag === undefined || !returnFlag) {
        $("#csvArea").val(header + "\n" + content);
    } else {
        return (header + "\n" + content);
    }
}

function processJSON(data) {
debugger;
    $.each(data, function(k, data1) {

        var type1 = typeof data1;

        if (type1 == "object") {

            flag = false;
            processJSON(data1);
            arr.push("end");
            arr.push("end");

        } else {
            arr.push(k, data1);
        }

    });
    return arr;
}
</script>
</head>
<body>
    <h1>XML2CSV Demo</h1>
    <button id="convertToXmlBtn" onclick="xmlTocsv()">XML => CSV</button>

    <div>        
        <h4>XML:</h4>
        <textarea id="xmlArea" cols="55" rows="15"></textarea>
    </div>

    <div>
        <h4>CSV:</h4>
        <textarea id="csvArea" cols="55" rows="15"></textarea>
    </div>    
</body>
</html>

Answer 1

确实没有多少 Knockout 可以添加到您的代码中。我为我创建的 2 个可观察对象使用了 click 绑定和 value 绑定 - xmlArea 和 csvArea。这消除了您使用 id 属性和 jQuery 的 val() 函数的需要。

我也把整个代码移到了body标签的底部，否则Knockout不会绑定HTML.

您的其余代码保持不变。

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script type='text/javascript' src="https://cdn.rawgit.com/abdmob/x2js/master/xml2json.js"></script>


</head>
<body>
    <h1>XML2CSV Demo</h1>
    <button id="convertToXmlBtn" data-bind="click: xmlTocsv">XML => CSV</button>

    <div>        
        <h4>XML:</h4>
        <textarea cols="55" rows="15" data-bind="value: xmlArea"></textarea>
    </div>

    <div>
        <h4>CSV:</h4>
        <textarea cols="55" rows="15" data-bind="value: csvArea"></textarea>
    </div>    
</body>
<script>
var viewmodel = function(){
  var self = this;
  self.xmlArea = ko.observable();
  self.csvArea = ko.observable();
  self.xmlTocsv = function() {
  debugger;
      var data = self.xmlArea();

      var xml = "";

      if (data !== null && data.trim().length !== 0) {
  debugger;
          try {
              xml = $.parseXML(data);
          } catch (e) {
              throw e;
          }

          var x2js = new X2JS();

          data = x2js.xml2json(xml);
          jsonTocsvbyjson(data);

      }
  }

  function jsonTocsvbyjson(data, returnFlag) {
  debugger;
      arr = [];
      flag = true;

      var header = "";
      var content = "";
      var headFlag = true;

      try {

          var type1 = typeof data;

          if (type1 != "object") {
              data = processJSON($.parseJSON(data));
          } else {
              data = processJSON(data);
          }

      } catch (e) {
          if (returnFlag === undefined || !returnFlag) {
              console.error("Error in Convert to CSV");
          } else {
              console.error("Error in Convert :" + e);
          }
          return false;
      }

      $.each(data, function(k, value) {
          if (k % 2 === 0) {
              if (headFlag) {
                  if (value != "end") {
                      header += value + ",";
                  } else {
                      // remove last colon from string
                      header = header.substring(0, header.length - 1);
                      headFlag = false;
                  }
              }
          } else {
              if (value != "end") {
                  var temp = data[k - 1];
                  if (header.search(temp) != -1) {
                      content += value + ",";
                  }
              } else {
                  // remove last colon from string
                  content = content.substring(0, content.length - 1);
                  content += "\n";
              }
          }

      });

      if (returnFlag === undefined || !returnFlag) {
          self.csvArea(header + "\n" + content);
      } else {
          return (header + "\n" + content);
      }
  }

  function processJSON(data) {
  debugger;
      $.each(data, function(k, data1) {

          var type1 = typeof data1;

          if (type1 == "object") {

              flag = false;
              processJSON(data1);
              arr.push("end");
              arr.push("end");

          } else {
              arr.push(k, data1);
          }

      });
      return arr;
  }
};
ko.applyBindings(new viewmodel());
</script>
</html>

将 XML 转换为 CSV 时如何使用 knockoutJS？

How to use knockoutJS when converting XML to CSV?

javascript

knockout.js