Question

I retrieved a template Javascript / HTML based on Backbone.js. I would need to add a dynamic dropdown list in a field of the following form:

<script type="text/template" id="compose-view-template">
<form id="email-compose" class="form-email-compose" method="get" action="">
    <div class="form-group">
        <select type="email" id="input-to" placeholder="To" class="input-transparent form-control">
        </select>
    </div>
    <div class="form-group">
        <input type="text" id="input-subject" placeholder="Subject" class="input-transparent form-control"
               value="<%= subject %>">
    </div>
    <div class="form-group">
        <textarea rows="10" class="form-control" id="wysiwyg" placeholder="Message"><%- body %></textarea>
    </div>
    <div class="clearfix">
        <div class="btn-toolbar pull-xs-right">
            <button type="reset" id="compose-discard-button" class="btn btn-gray">Annuler</button>
            <button type="submit" id="compose-send-button" onClick="fillEmailDropDown()" class="btn btn-danger">&nbsp;&nbsp;&nbsp;Envoyer&nbsp;&nbsp;&nbsp;</button>
        </div>
    </div>
</form>

</script>

The Backbone part is the following:

        var ComposeView = Backbone.View.extend({


        template: _.template($('#compose-view-template').html()),

        attributes: {
            id: 'compose-view',
            class: 'compose-view'
        },

        events: {
            "click #compose-save-button, #compose-send-button, #compose-discard-button": 'backToFolders'
        },

        render: function() {
            $('#widget-email-header').html(
                '<h5>Nouvel <span class="fw-semi-bold">Email</span></h5>'
            );
            $('#folder-stats').addClass('hide');
            $('#back-btn').removeClass('hide');
            this.$el.html(this.template(this.model.toJSON()));
            this._initViewComponents();


            return this;
        },

        backToFolders: function(){
            App.showEmailsView();


        },

        _initViewComponents: function(){
            this.$("textarea").wysihtml5({
                html: true,
                customTemplates: bs3Wysihtml5Templates,
                stylesheets: []
            });

        }



    });

The Javascript is the following:

$(document).ready(function() {
      var listItems = '<option selected="selected" value="0">- Select -</option>';
      console.log("Preparing Auto Fill of DropDown list for email adresses");

      for (var i = 0; i < jsonData.Table.length; i++) {
        listItems += "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>";
      }
      $("#input-to").append(listItems);
});

Unfortunately the .append has no effect on the select form, and the Dropdown remains empty. I also tried to use .html instead of append but same result.

If I'm adding the options manually in the select tag, it works properly but I need to fill it dynamically...

any idea ?

Answer 1

听起来问题很可能是在您尝试追加到html之前，主干没有将#input-to元素添加到您的html中。那不会抛出任何错误，它会默默地失败，然后主干会在追加尝试后添加（空）元素。

你只知道它是安全的＆＃34;在骨干添加了html后附加你的内容，这种情况发生在你的render方法中：

    render: function() {
        $('#widget-email-header').html(
            '<h5>Nouvel <span class="fw-semi-bold">Email</span></h5>'
        );
        $('#folder-stats').addClass('hide');
        $('#back-btn').removeClass('hide');
        this.$el.html(this.template(this.model.toJSON()));
        // NOW IT IS SAFE TO APPEND CONTENT...

        this._initViewComponents();


        return this;
    },

绝对有效的解决方案是添加直接在render方法中附加到元素的代码。我建议如果附加的内容非常固有的话。

如果这看起来并不一致，那么很多将取决于您的骨干网的设置方式。在初始化视图的行之后附加内容可能是安全的：

var myView = new ComposeView({});
// NOW APPEND CONTENT

但是，只有在以下情况下才会安全：

您的视图会在创建时立即呈现，
渲染是同步的（不首先获取外部数据或模板）。

希望这会有所帮助，祝你好运。

append has no effect on a form based on Backbone.js

1 个答案: