用core-ajax构建一个新元素聚合物中的XML

Building a new element with core-ajax & xml in polymer

本文关键字：XML 元素 聚合物 一个 构建 core-ajax 新元素      更新时间：2023-09-26

我对写代码完全陌生，基本上我是从互联网上学习的，甚至没有一个朋友来讨论，因为我是一个有能力操作鼠标的人。所以，事情是这样的，当我决定学习聚合物时，我忘记了1件基本的事情，我不知道javaScript。在过去的几年里，我学习了HTML,css和一些jquery。

所有我想做的是创建一个元素"my-code"。保存为my-codes.html

  <link rel="import" href="../components/polymer/polymer.html">
    <link rel="import" href="../components/core-ajax/core-ajax.html">
<polymer-element name="my-code">
<template>
<core-ajax auto url="../xmls/canon.xml" handleAs="xml" response="{{resp}}"></core-ajax>
<p>{{resp}}</p>
</template>
<script>
Polymer('mycode',{
    });
</script>
</polymer-element>

这是我的index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>testing template</title>
  <script src="components/platform/platform.js"></script>
  <link rel="import" href="elements/my-codes.html">
</head>
<body unresolved>
<my-code></my-code>
</body>
</html>

这是我的一些范例。xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<canonc xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <canon>
        <Error> EO  </Error>
        <Cause> Fuser unit malfunction  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> EOOO  </Error>
        <Cause> Fuser unit malfunction  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E001  </Error>
        <Cause> Fuser unit thermistor problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E002  </Error>
        <Cause> Fuser unit thermistor/triac problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E003  </Error>
        <Cause> Fuser unit thermistor/heater problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
</canonc>
所有我需要的是如果有人帮助完成(教我)的代码。尤其是javaScript部分。我需要输出像 
<div class="card">
<div>error</div>
<div>cause</div>
<div>action </div>
</div>
<div class="card">
<div>error2</div>
<div>cause2</div>
<div>action2 </div>
</div>
我知道我要求太多了，但是请帮助我。我有20个XML文档，否则我就得把它们做成别的东西。或者放弃这个想法(因为我做事情是出于爱好);学习).

这是jquery脚本，我一直在不同的HTML上使用相同的目的。

function commn(){
    $("#canon").empty();
      $.ajax({
    type: "GET",
    url: "xmls/canon.xml",
    dataType: "xml",
    success: function(xml){
    $(xml).find('canon').each(function(){
      var serror = $(this).find('Error').text();
      var sdesc = $(this).find('Cause').text();
            var saction = $(this).find('Action').text();
      $("<div class='concor'></div>").html("<div class='error'>" + serror + "</div>" + "<div class='desc'>" + sdesc + "</div>" + "<div class='actn'>" + saction + "</div>").appendTo("#canon");
    });
  },
  error: function() {
    alert("An error occurred while processing XML file.");
  } 
        });
}

Thanks in advance

首先，您在调用Polymer函数时犯了一个错别字。第一个参数必须与元素名称匹配，因此需要写入

Polymer('my-code', ...

然后我建议使用过滤器和重复模板，以尽量减少所需的JavaScript的数量，为您的要求。你也不需要jQuery(顺便说一句)。如果你了解jQuery，那么你就了解JavaScript，因为jQuery是用JavaScript编写的;-))。

代码如下:

<polymer-element name="my-code">
  <template>
    <core-ajax auto url="../xmls/canon.xml" handleAs="xml" 
      response="{{resp}}"></core-ajax>
    <template repeat="{{canon in resp | nodeList('canon')}}">
      <div class="card">
        <div>{{canon | nodeText('Error')}}</div>
        <div>{{canon | nodeText('Cause')}}</div>
        <div>{{canon | nodeText('Action')}}</div>
      </div>
    </template>
  </template>
  <script>
    Polymer('my-code', {
      nodeList: function(element, name) {
        return element ? 
          [].slice.call(element.querySelectorAll(name)) : []
      },
      nodeText: function(element, name) {
        return element.querySelector(name).innerHTML;
      }
    });
  </script>
</polymer-element>

解释:

nodeList(element, name)是一个过滤器函数，它返回指定element的所有(XML)子节点，并使用选择器name作为数组(这是用稍微奇怪的[].slice.call结构完成的，请参阅这个SO问题以获取有关此的更多信息)。

element可以是未定义的，所以我们需要检查这一点，在这种情况下返回一个空数组。

nodeText(element, name)是一个过滤器函数，它使用选择器name返回指定element的子节点的文本内容。

repeat-template 

<template repeat="{{canon in resp | nodeList('canon')}}">

在nodeList过滤器返回的所有数组元素(即XML的canon元素)上重复。

然后在每个

<div>{{canon | nodeText('Error')}}</div>

nodeText过滤器返回指定子节点的文本内容(例如:

当前canon节点的"错误")。

您可以在这里和这里找到更多关于querySelector()和querySelectorAll()函数的信息。

相关文章：