通过主干传递 JSON 到下划线答案

【问题标题】：pass JSON to underscore via backbone通过主干传递 JSON 到下划线
【发布时间】：2023-04-06 03:49:01
【问题描述】：

我被下划线和主干卡住了。我无法在下划线模板中呈现 JSON。浏览器不输出任何内容，但没有错误消息。这是我的工作：

服务器返回以下json：

[{"id":"1","vorname":"Magnus","nachname":"R.","geb":"0","natio":""},{"id":"2","vorname":"Konstantin","nachname":"W.","geb":"0","natio":""}]

///////我的模特://////

define([
  'underscore',
  'backbone',
], function(_, Backbone){

  var MitarbeiterModel = Backbone.Model.extend({});
  return MitarbeiterModel;
});

/////我的收藏:///////

define([
  'underscore',
  'backbone',
  'models/mitarbeiter',


], function(_, Backbone, MitarbeiterModel){

  var MitarbeiterCollection = Backbone.Collection.extend({
    model: MitarbeiterModel,
    url: '/aquilamus/server/request.php',

  });

  return MitarbeiterCollection;
});

//////我的观点///////

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/mitarbeiter',
  'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html'
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){



 var MitarbeiterListView = Backbone.View.extend({
    el: $("#container"),
    initialize: function(){
      this.collection = new MitarbeiterCollection;

      var newtemplate = MitarbeiterTemplate;
       _.templateSettings.variable = "rc";
      this.template = _.template($(newtemplate).html());
    },
    render: function(){
      var self = this;

      // show some loading message
      this.$el.html('Loading');

      // fetch, when that is done, replace 'Loading' with content
      this.collection.fetch().done(function(){
          console.log(self.collection.toJSON());
          var renderedContent = self.template(self.collection.toJSON());

          self.$el.html(renderedContent);
      });
      return this;
    }


  });
  // Our module now returns our view
  return MitarbeiterListView;
});

下划线模板：

<script type='text/javascript' id='mitarbeiter-anzeigen'>
    <% _.each( rc.mitarbeiter, function(mitarbeiter){ %>
        <div>test</div>
        <div><%= mitarbeiter.vorname %></div>

    <% }); %>   
</script>

console.log(self.collection.toJSON()) 记录以下内容：

【问题讨论】：

标签： json backbone.js requirejs underscore.js

【解决方案1】：

在您的模板中，您有：

<% _.each( rc.mitarbeiter, function(mitarbeiter){ %>

那个rc是从哪里来的？

你的代码在你的控制器中应该是这样的：

self.template({ "mitarbeiters": self.collection.toJSON() });

然后在你的模板中：

<% _.each( mitarbeiters, function(mitarbeiter){ %>

【讨论】：

谢谢你拯救了我的一天 :-) rc 来自 _.templateSettings.variable = "rc";

【解决方案2】：

回答： ///更新的下划线模板:////

<script type='text/javascript' id='mitarbeiter-anzeigen'>
    <% _.each(rc.mitarbeiters, function(mitarbeiters){ %>
        <div><%= mitarbeiters.vorname %></div>

    <% }); %>

////更新视图:///////

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/mitarbeiter',
  'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html'
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){



 var MitarbeiterListView = Backbone.View.extend({
    el: $("#container"),
    initialize: function(){
      this.collection = new MitarbeiterCollection;

      var newtemplate = MitarbeiterTemplate;
       _.templateSettings.variable = "rc";
      this.template = _.template($(newtemplate).html());
    },
    render: function(){
      var self = this;

      // show some loading message
      this.$el.html('Loading');

      // fetch, when that is done, replace 'Loading' with content
      this.collection.fetch().done(function(){
          console.log(self.collection.toJSON());
          var renderedContent = self.template({ "mitarbeiters": self.collection.toJSON() });

          self.$el.html(renderedContent);
      });
      return this;
    }


  });
  // Our module now returns our view
  return MitarbeiterListView;
});

【讨论】：