在向DOM动态添加Gridster小部件时,UI.renderWithData的Meteor问题

时间:2014-04-30 18:59:20

标签: meteor gridster

我尝试使用gridster.add_widget方法将预呈现的模板传递到DOM中。

我一定不明白如何使用UI.renderWithData,因为每次调用UI命令时,我都会在最底部收到错误消息。

我对文档的理解是,这些命令将返回传入模板的完整格式的HTML。我已经通过为每个项目创建一个红色框来验证gridster是否正常工作。被召唤。

任何帮助都会非常感激。谢谢!

Template.projects.rendered = function(){

    gridster = $(".gridster div").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    }).data('gridster');

   var projectz = Projects.find({}, {sort: { time: -1}});
   $.each(projectz, function(index, widget){
       if (widget != undefined) {
           console.log(widget);

           // This works and adds a red box for each project in the database
           gridster.add_widget('<div style="background-color: red;">');

           // This does NOT work, I assume it is an issue with my use of UI.renderWithData
        // gridster.add_widget(UI.insert(UI.renderWithData(Template.projects, widget)), 1, 1);
       }
   });
};


//
// Error I get trying to gridster.add_widget() or console.log()
// with (UI.insert(UI.renderWithData(Template.projects, widget)));
//

Exception from Deps afterFlush function function: TypeError: Cannot read property 'nodeName' of undefined
at tbodyFixNeeded (http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:1368:13)
at Function.DomRange.insert (http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:1337:7)
at Object.UI.insert (http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2123:15)
at null.<anonymous> (http://localhost:3000/client/controllers/projects.js?c493c07746d208ff23d7a134ed4353a706244d46:41:29)
at Function.o.extend.each (http://localhost:3000/client/compatability/jquery/jquery-2.1.0.min.js?4c694ca97ed11ffba659454ac63c35e0452a994d:2:2931)
at Object.Template.projects.rendered (http://localhost:3000/client/controllers/projects.js?c493c07746d208ff23d7a134ed4353a706244d46:37:7)
at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:424:23
at _.extend.flush (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:331:13) 

1 个答案:

答案 0 :(得分:0)

UI.insert期望将DOM节点作为第二个参数,请参阅documentation。你在没有任何额外参数的情况下调用它。

您是否有理由不将所有Project元素渲染到模板中的页面?