Question

I have spent 2 days on the issue and can't seem to find the reason why the name value is not being passed to the underscore template.

I am fetching the User from a URL, which returns a value { "name": "UserName" } (and some more) which I can see in the console. Then I am fetching the model, and passing it to the View using the success callback. The template is rendered, though without the values.

In the view I can log the attributes, but they are not rendered in the underscore template.

Why is the name not being rendered in the template? There are no errors, and in the view I can log the attributes from the model.

I am using requirejs, backbone and underscore (and jekyll to create the html) and I have the following code:

Main

require([ 'app' ], function(App){
  App.initialize();
});

App

define(['jquery','underscore','backbone','users/model','users/view'
], function($, _, Backbone, User, ProfileLinkView){
  var initialize = function(){
        console.log("Working")
        user = new User();
        user.fetch({
            success : function(){
                console.log(user)
                var profileLink = new ProfileLinkView({ model : user });
                console.log("pL:", profileLink.el); 
            }
        });
    }
  return {
    initialize: initialize
  };
});

View

define(['backbone','users/model'], function( Backbone, User ) {

    var ProfileLinkView = Backbone.View.extend({
        el: '#profilelink',
        //template: _.template( "<a href='#'>Len</a>"),
        initialize : function(){
            this.render();

            this.listenTo(this.model, 'change', this.test);
        },
        test : function(){
            alert( "change" );
        },
        render: function() {
            console.log("v", this.model.attributes );
            data = this.model.attributes;
            this.template = _.template( "<a href='#'><%= name %></a>", this.model.toJSON() );
            this.$el.html( this.template( this.template() ) );
            return this;
        },
    })

    return ProfileLinkView
});

Model

define(['underscore','backbone',], function(_, Backbone, User){
    var User = Backbone.Model.extend({
        url: 'http://localhost:3000/users/0',
    })
    return User;
});

And the incorrect result

<li class="dropdown" id="profilelink"><a href="#"></a></li>

Which should be:

<li class="dropdown" id="profilelink"><a href="#">UserName</a></li>

Answer 1

我不确定这部分

this.template = _.template( "<a href='#'><%= name %></a>", this.model.toJSON() );
this.$el.html( this.template( this.template() ) );

您可以尝试将其更改为此内容吗？

this.template = _.template( "<a href='#'><%= name %></a>");
this.$el.html( this.template( this.model.toJSON() ) );

underscore's template的第二个参数是模板设置而不是数据。您应该将数据传递到已编译的模板中。

How to render model attributes in underscore template using a Backbone view

1 个答案: