Jade can't access variable unless it's rendered as {{ variable }}

Question

I'm currently rendering a Jade template after passing in values from Backbone.js using _.template. I can access anything rendered directly as:

// Jade
{{ variable }}

but I cannot access it using:

// Jade
each item in variable
// exception: variable is not defined

So for instance in the following code I'm trying to send in a resources object that I can iterate over using each, but I can't seem to access it at all UNLESS it's marked as {{ resources }}, but then I can't seem to iterate over it with each in Jade.

Backbone.js:

render: function() {
  this.$el.append( this.todoTpl({
      // data
      resources: this.collection.data.attributes.resources,
    })
  );

  return this;

}

Jade:

if(typeof resources !== "undefined")
      each key, value in resources
        div.dev
          p= value
          p= key

Which never displays anything. I can render [Object, Object] to the HTML if I use {{ resources }} though.

I've tried using locals.resources, among other things, but I can't seem to nail this down and it seems like it should be something dumb and simple.

TL;DR: how can I set a variable so that it's accessible to Jade methods and not just rendered as text by {{ variable }}?

Thank you!

UPDATE: Posting additional code for my collection:

var ProjectDataCollection = Backbone.Collection.extend({

  defaults: {
    versionOne: "",
    eCM: "",
    bugzilla: "",
    teamCity: "",
    appData: "",
    data: "",
  },

  model: ProjectModel,

  url: '/data',

  initialize: function(models, options) {
      var id = options.id || [];
      if (id > 0) { 
          this.fetchData(id);
      }
      console.log("A new collection has been created.");
  },

  fetchData: function(id) {
    // Save a reference to the existing url
    var baseUrl = this.url;

    // Assign our batch url to the 'url' property and call the server
    this.url += '/' + id;
    this.fetch({
        success: function(collection, response) {
            collection.appData = new AppData(response.details);
            collection.bugzilla = new Bugzilla(response.apis.bugzilla);
            collection.versionone = new VersionOne(response.apis.versionone);
            collection.trigger('change');
        },
        error: function() {
            console.log("fail");
        }
    });

    // Restore the 'url' property
    this.url = baseUrl;
}

});

I avoiding posting all this mostly to try and keep my question simple. I apologize if I left too much out! I also KNOW I'm doing some horrible things here due to my inexperience with Backbone :)

UPDATE WITH RESOLUTION:

To answer several questions: I'm using Jade and Underscore because Jade templates for HTML are beautiful and concise. Backbone is using Underscore to pass in data into JS templates that I'm rendering with Jade. Although I haven't seen a lot of people doing this online there have been a few posts where others have preferred this arrangement.

user1737909's comments helped me to find my solution. When using _.template I was passing in an override to the templateSettings global to utilize {{ }} for my interpolation (a holdover from another template engine I've used). Underscore will print out straight values in this way but it won't process script such as:

{{ _.each(list, function() {} }}

Once I removed my override settings:

<% _.each(list, function() {} %>

was quite happy and worked perfectly. Although it seems strange to use two template engines I have to say Jade is so nice it was still worth the pain to enjoy its syntax :)

Thanks for the feedback!

Answer 1

Jade插值是#{var} ，而不是{{ var }} ，所以我想您不是将变量传递给Jade而是传递给其他东西（例如把手，甚至是角度的东西）