将数据传递给下划线以渲染不起作用 [英] Passing data to underscore for rendering not working

问题描述

我正在尝试渲染一个下划线模板，它是下面的模板

I am trying to render an underscore template which is the one below

    div.col-md-12#english
        select(value="", class="form-control")
            option 
                    | Select Your Language Preference
            script(type="text/template" id="english-pref")
             <% if (selected === "US") { %>      
             option(value="US", selected) | United States
             <% } else %>
             <% if(selected === "US"){ %> 
             option(value="UK", selected) | United Kingdom
             <% } %> 

这是我的主干视图代码

 app.NotesView = Backbone.View.extend({
    el: '#notes',
    events: {
        'click #save': 'save',
        'click #update': 'update'
    },
    template1: _.template($('#about').html()),
    template2: _.template($('#facts').html()),
    template3: _.template($('#english').html()),

    initialize: function() {
        app.NotesModel = new app.NotesModel({});

        this.model = app.NotesModel;

        app.email = $('#data-user').text();
        app.username = $('#data-username').text();

        app.NotesModel.fetch({
            data: {
                email: app.email,
                username: app.username
            },
            type: 'POST',
            processData: true,
            success: function(data) {                    
                $('#save').remove();
            },
            complete: function(xhr, textStatus) {
                //console.log(textStatus);
            },
            error: function() {
                $('#about-container .note-editable').html('');
                $('#note-container .note-editable').html('');
                $('#update').remove();
            }

        });

        this.model.bind('sync', this.render, this);

    },
    render: function() {            
        this.$('#aboutParent').html(this.template1, this);
        this.$('#noteParent').html(this.template2, this);
        app.initializeEditor();
        $('#about-container .note-editable').html(this.model.attributes.about);
        $('#note-container .note-editable').html(this.model.attributes.editorNote);
        if(this.model.attributes.english === null || this.model.attributes.english === undefined || this.model.attributes.english === '') {
            /*var data = '<option value="US">United States</option><option value="UK">United Kingdom</option>';*/ 
            var data = {"selected": "US"};                

            this.$('#noteParent').html(this.template3,data);

        }else {
            var data = {"selected": "UK"};                

            this.$('#noteParent').html(this.template3,data);
        }
    }
 });

我看了几个教程，我真的很困惑，因为每个教程都有自己的完成任务的方式.我现在面临的问题是我的模板没有呈现，因为它说选定的是未定义的.我是否将对象正确地传递给视图?

I have looked at a couple of tutorials and I am really confused as each one has its own way of getting things done.The problem that I am facing now is that my template is not rendered as it says that selected is undefined. Am I passing the object properly to the view at all ?

还有一种模式可以用作渲染模板的经验法则.

Also is there a pattern that I can use as a rule of thumb for rendering templates.

推荐答案

this.template3(以及 template1 和 template2 就此而言)是一个函数，您可以将数据作为参数调用以返回 HTML.一般来说:

this.template3 (and template1 and template2 for that matter) is a function which you call with the data as an argument to get the HTML back. In general:

var tmpl = _.template(template_source_text);
var html = tmpl(template_data);

您只是将模板函数传递给 jQuery 的 html:

You're just passing the template function to jQuery's html:

this.$('#noteParent').html(this.template3,data);

当你给 html 一个函数时，它调用函数但不使用模板函数期望的参数:

When you hand html a function, it calls the function but not with the arguments a template function expects:

.html(函数)
类型:函数(整数索引，htmlString oldhtml)=> htmlString

.html( function )
Type: Function( Integer index, htmlString oldhtml ) => htmlString

返回要设置的 HTML 内容的函数.接收集合中元素的索引位置和旧的 HTML 值作为参数.

A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments.

你所做的和说的一样:

this.$('#noteParent').html(this.template3(some_index, some_html));

你想说:

this.$('#noteParent').html(this.template3(data));

以便将 data 中的内容传递给模板函数.

so that the stuff in data is passed to the template function.

这篇关于将数据传递给下划线以渲染不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！