编辑：

Question

我使用jQuery-handlebars加载句柄模板，然后调用jQuery-responsiveTabs插件创建一个标签式界面，如下所示：

$("#tabs-test").render('tabs',data);
console.log("The render method has finished");
$("#horizontalTab").responsiveTabs({
   rotate: false,
   startCollapsed: 'tabs',
   collapsible: 'tabs',
   setHash: true,
   disabled: [3,4],
   activate: function(e, tab) {
     $('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
  }
});

控制台看起来像这样：

  XHR finished loading: GET "http://localhost:8080/templates/data/tabs.json". 
  The render method has finished (index):139
  XHR finished loading: GET "http://localhost:8080/templates/tabs.hbs".

如何确保在渲染方法完成后立即执行代码？

编辑：

尝试使用jQuery的{{1}}和promise方法解决此问题：

when

这是日志：

 var handlebars_promise=$("#tabs-test").render('tabs',data).promise();
                    $.when(handlebars_promise).then(function(){
                        $("#horizontalTab").responsiveTabs({
                        rotate: false,
                        startCollapsed: 'tabs',
                        collapsible: 'tabs',
                        setHash: true,
                        disabled: [3,4],
                        activate: function(e, tab) {
                            $('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
                        }
                    });
                    console.log(handlebars_promise.state());    
                });

在操作完成之前解决了承诺。

Answer 1

如果插件没有指定任何回调，则需要挂钩初始化插件的函数。例如，

var saveFunc = $.fn.render;
$.fn.render = function(template, source){
    saveFunc(template, source);
    //your code here
};

另一种选择是直接编辑源代码，以便在您想要的位置调用所需的功能。 ich你不想直接把你的代码放入钩子代码中，你需要在钩子中添加一个新的回调。

示例：

var saveFunc = $.fn.render;
$.fn.render = function(template, source, callback){
    saveFunc(template, source);

    if(typeof callback === 'function'){
       callback.call(this);
    }
};

$("#tabs-test").render('tabs',data,function(){
    //your code here
});

...因为我不知道来源，这可能也会失败，关于ajax调用。如果您必须确保在调用回调时完成渲染功能，则必须修改源代码以实现在加载所有内容时触发的回调...

唯一的另一个选择是使用setInterval并检查内容是否已加载（这不是一个干净的方法....）

在jQuery-handlebars插件完成运行后立即执行代码

编辑：

1 个答案: