Question

我无法从视图渲染方法中的fetch方法获取响应字符串。

收集课程就在这里。

 Collection = (function(){

    var Events;

    Events = Backbone.Collection.extend({


        url:function(){
           //alert(urlOptions);
         return this.urlParam;
           // alert('API call :'+urlOptions);
        },

        initialize: function(models, options){
            this.urlParam = options.urlParam || "";
        },

        parse: function( response ){
            var parsed = Jath.parse(
                [ '//notes', {

                } ], response );
            console.log(parsed);
            return parsed;

        }
        });

    return {
        newInstance : function(models,options) { return new Events(models,options); }
    };
})();


The View Goes Here 

    View = (function() {
  'use strict';

  var
    htmlTemplate = _.template( $('#eventGridTemplate' ).html() ), // See templatesSearch.jsp
    expanded = true, // By default the Events Grid extends to the bottom of the browser window.
    BackboneView, applyStyles;

  /**
   * Apply CSS specific to this view
   * Unfortunately, this View needs to modify its parent wrapper element.
   * Otherwise the layout will break when it's resized.  See templatesSearch.jsp.
   * @param {Object} $elmt
   * @param {Boolean} expand
   */
  applyStyles = function( $elmt, expand ) {

    var
      top   = '2px',
      left  = '2px',
      pos   = 'absolute',
      right = '2px';

    if ( expand ) {

      $elmt.css({
        "position" : pos,
        "top"      : top,
        "left"     : left,
        "right"    : right,
        "bottom"   : "2px"
      });

      $elmt.parent().css( 'bottom', '2px' );

    } else {

      $elmt.css({
        "position" : pos,
        "top"      : top,
        "left"     : left,
        "right"    : right,
        "bottom"   : "50%"
      });

      $elmt.parent().css( 'bottom', '50%' );
    }
  };

  // See 'http://backbonejs.org/#View-constructor' for more info
  BackboneView = Backbone.View.extend({

    onAiringsBtn : function( event ) {

      // If the Events Grid container was expanded, contract it.
      // If it was contracted, expand it.
      expanded = expanded ? false : true;
      applyStyles( this.$('div'), expanded );
},

    initialize : function() {
  this.render();
    },

    render : function() {
      // this.$el is the jQuery version of this.el
      // Which is populated by options.el
      // Which is part of the options object passed into the constructor
      //alert('Start Date:' +$('#datepicker').datepicker('getDate'));
       var eventsCollection = Collection.newInstance([],{urlParam:'http://localhost:8080/adtglobal/2.0/api/events?startDate=2013-11-05T00:00:00-0400&endDate=2013-11-06T00:00:00-0400'});
       //console.log(eventsCollection.url());
        eventsCollection.fetch({
             success : function(eventsCollection , response){
                 console.log(eventsCollection.toJSON());
                 alert(eventsCollection.toJSON());
             }
                   });
        this.$el.html( htmlTemplate );
        applyStyles( this.$('div'), true );
    }
  });

  //-------------------------------------------------------------------------------------------------------------------
  // Public API
  //-------------------------------------------------------------------------------------------------------------------

  return {
    newInstance : function(options) { return new BackboneView(options); }
  };

})();

我得到响应成功，我在浏览器控制台中看到了xml，但是我如何解析它？

回复在这里

<Events xmlns="urn:api:2.0">
<PageNavigation showing="45"></PageNavigation>
<Event id="400515625" href="400515625" source="SDR">
<OrgHierarchy>
<level id="56" typeId="100" title="Soccer" description="Sport" href="../sporthierarchy?levelId=56&levelTypeId=100"></level>
<level id="2902" typeId="101" title="UEFA" description="Confederation" href="../sporthierarchy?levelId=2902&levelTypeId=101" parentId="56" parentType="100"></level>
</OrgHierarchy>
<EventType id="1">Standard Event</EventType>
<League id="1860">UEFA > Polish Orange Ekstraklasa</League>
<EventTitleText>Ruch Chorzow vs. Zawisa Bydgoszcz</EventTitleText>
<CompetitionType id="1">Team vs Team</CompetitionType>
<EventCompetitors>
<Teams>
<HomeTeam id="73960" href="../teams/73960">Ruch Chorzow</HomeTeam>
<AwayTeam id="107278" href="../teams/107278">Zawisa Bydgoszcz</AwayTeam>
</Teams>
</EventCompetitors>
</Event>
</Events>

Answer 1

好吧，看来你没有正确使用Jath。

您需要定义与您的XML匹配的模板。

之前我没有使用Jath，但我会尝试为您创建一个简单的模板：

//in your parse
var template = [ "//Events", {id: "@id", eventType: 'EventType'}];

return Jath.parse(template, response );

首先尝试一下，看看你的藏品中是否有东西。

您的响应中似乎已嵌套资源，因此您必须完成模板。

或者，如果您不必使用Jath，请尝试更简单的方法：这是一个示例jsfiddle，您应该能够在控制台中看到已解析的JSON。 http://jsfiddle.net/5j57T/

编辑：xml到json代码来自：http://davidwalsh.name/convert-xml-json

注意：您需要再次将该json解析为您需要的对象数组，以使您的应用程序正常工作！

=====================

编辑：另一个例子（效果比以前的小提琴更好） http://jsfiddle.net/5j57T/1/

使用jquery库http://www.fyneworks.com/jquery/xml-to-json/

只有一个问题，因为事件中只有一个事件，默认情况下无法解析为数组，您必须手动执行此操作。如果，每个响应总是只有一个事件，你可以这样做：

parsed = [$.xml2json(xmlDoc.getElementsByTagName('event')[0])]

或者你可以做到

parsed = $.map(xmlDoc.getElementsByTagName('event'), function(eventXml) {
  return $.xml2json(eventXml);
});

工作jsfidde：http://jsfiddle.net/5j57T/2/

==========================

修改

我认为默认情况下，骨干网需要服务器的JSON响应。您将不得不覆盖它的fetch（）函数，因此支持XML。所以在你的集合定义中，添加：

fetch: function (options) { options = options || {}; options.dataType = "xml"; return Backbone.Collection.prototype.fetch.call(this, options); }

这是一个有效的jsfiddle：http://jsfiddle.net/5j57T/4/

忽略我传递给fetch（）的'data'和'type'选项，以及url，所有这些只是为了让Ajax请求在jsfiddle上运行。你不应该在你的应用程序中有这些。

在这个演示中，当返回XML时，它会被正确地解析为集合。您应该能够在控制台中看到您的收藏。

==

如果所有后端服务仅返回XML。我建议覆盖Backbone.sync函数，使其适用于其他方法，如save（）。

从获取骨干中解析响应

1 个答案: