0

バックボーンテンプレートを追加して配置された要素にイベントをバインドしようとしています:

 appendEditTemplateAndSetEvents: function() {
                var associatedCollection = App.Helpers.findAssociatedCollection(this.allCollections, this.associatedCollectionId);
                var template = this.setEditTemplateForElement(associatedCollection.type);
                var modalBody = this.$el.find('.modal-body');

                modalBody.empty();

                var firstModel = associatedCollection.at(0);

                if(template.mainTemplate !== null) {
                    modalBody.append($('#edit-form-element-frame').html());

                    //each mode in collection
                    associatedCollection.each(function(model){
                        if(model.get('positionInContainer') === 1) {
                            firstModel = model;
                        }
                        console.log(model.attributes);
                        modalBody.find('.elements-in-editmodal-wrapper').append(template.mainTemplate(model.toJSON()));
                    });
                }

                if( template.templateValidation.length !== 0 ) {
                    modalBody.append('<hr><h3>Validateregels</h3>');
                    _.each(template.templateValidation, function(val, index) {
                        modalBody.append(val(firstModel.toJSON()));
                    });
                }

                //set listeners and handlers that apply when a edit modal is open
                this.validationEventsForEditModal(firstModel);
                this.editErrorMessagesInModal(firstModel);
            },

問題は、最後の 2 つの関数が呼び出されたときに、テンプレートの html がまだ追加されていないため、イベントが長さ 0 のオブジェクトにバインドされることです。

この非同期の問題に対するまともな解決策はありますか? 私は $.Defferred を試しましたが、うまくいきませんでした。

4

1 に答える 1