在backboneJS中的把手模板中追加html字符串不起作用?

时间:2014-02-21 08:28:40

标签: javascript html5 backbone.js handlebars.js

calline renderBankInvContainers函数不会在html页面中附加html(字符串字符串)。

var editAccountView = Backbone.View.extend({

    tagName : 'div',
    className : 'edit-account-wrap',

    initialize : function() {
        var self = this;
        this.$el.append(editAccountTmpl());
        $('.application-content-wrap').append(this.$el);
        this.collection = new itemFormDataSummaryCollection();
        this.collection.fetch({
            timeout : 30000,
            type : 'POST',                  
            success : function(response) {                      
                var result = response.toJSON();
                if (result[0].containerType == 'BANK' || result[0].containerType == 'STOCKS') {
                    self.renderBankInvContainers();
                }
                self.$el.find('.edit-account-wrap ').html(editAccountContentTmpl());
            }
        });
    },

    renderBankInvContainers : function() {
        var field;
        field = this.displayField("Nickname", itemFormData['nickname'], "text", "nickname", false);
        $('.edit-account-wrap').find('.input-row').append(field);
        field = this.displayField("Include in Net Worth", itemFormData['includeInNetworth'], "toggle", "includeInNetworth", false);
        $('.edit-account-wrap').find('.input-row').append(field);
    },

    displayField : function(dispLabel, dispData, dispComp, name, readOnly) {
        var finalDispalyField;
        if (dispComp == "text") {
            var label = '<div class="small-6 columns"><label>' + dispLabel + '</label></div>';
            var input;
            if (readOnly) {
                input = '<div class="small-6 columns"><input type="text" name"' + name + '" value="' + dispData + '" readonly></div>';
            } else {
                input = '<div class="small-6 columns"><input type="text" name"' + name + '" value="' + dispData + '"></div>';
            }
            finalDispalyField = label + input;
            return finalDispalyField;
        }
        if (dispComp == "toggle") {
            var label = '<div class="small-6 columns"><label>' + dispLabel + '</label></div>';
            var input = '<div class="small-6 columns"><div class="switch small round"><input id="z" name="' + name + '" type="radio" checked><input id="z" name="' + name + '" type="radio"></div></div>';
            finalDispalyField = label + input;
            return finalDispalyField;
        }
    }
});     

return editAccountView;

2 个答案:

答案 0 :(得分:1)

未设置renderBankInvContainers函数中的itemFormData。

尝试使用fetch success回调来设置视图集合,如下所示:

success : function(response) {
    self.collection = response;
    var result = response.toJSON();
    if (result[0].containerType == 'BANK' || result[0].containerType == 'STOCKS') {
        self.renderBankInvContainers();
    }
    self.$el.find('.edit-account-wrap ').html(editAccountContentTmpl());
}

在您的renderBankInvContainers功能中,您可以使用this.collection

我认为您必须更改此函数中的if语句。

答案 1 :(得分:0)

出现错误,因为我在append()方法后加载模板。在调用renderBankInvcontainers()之前,我需要调用以下语句。 self。$ el.find('。edit-account-wrap')。html(editAccountContentTmpl());

success : function(response) {
    self.collection = response;
    var result = response.toJSON();
    **self.$el.find('.edit-account-wrap ').html(editAccountContentTmpl());**
    if (result[0].containerType == 'BANK' || result[0].containerType == 'STOCKS') {
        self.renderBankInvContainers();
    }    
}