简体   繁体   English

基金会轨道不使用车把

[英]Foundation Orbit not working with Handlebars

I'm having problems getting Foundation orbit to work. 我在完成基金会轨道工作时遇到了问题。 I can call it from regular HTML and it works fine but when I try to use dynamically generated Handlebars HTML, it does not load. 我可以从常规HTML调用它,它工作正常,但当我尝试使用动态生成的Handlebars HTML时,它不会加载。

The page is here: http://danheidel.github.io/resume-foundation/#art-contact The non-functional Orbit carosel is above, the functioning one is at the bottom of the page. 页面在这里: http ://danheidel.github.io/resume-foundation/#art-contact非功能性Orbit carosel位于上方,功能位于页面底部。 (formatting on the latter is a bit screwy since it's not in the Foundation grid) Source is here: https://github.com/danheidel/resume-foundation (后者的格式有点棘手,因为它不在Foundation网格中)来源在这里: https//github.com/danheidel/resume-foundation

I'm not seeing any errors on load so I suspect that Orbit is not firing on the dynamically templated HTML. 我没有看到任何加载错误,所以我怀疑Orbit没有触发动态模板化的HTML。 Has anyone gotten Orbit to work with templating? 有没有人得到Orbit与模板一起工作?

The dynamically generated HTML from Handlebars is below. Handlebars动态生成的HTML如下所示。 As far as i can tell, it's all formatted properly. 据我所知,它的格式正确。

EDIT: I'm almost certain that Orbit is not firing because it doesn't intercept HTML changes after the initial page load. 编辑:我几乎可以肯定Orbit没有触发,因为它在初始页面加载后没有拦截HTML更改。 I tested by having JQuery post-load modify a div with the proper HTML and Orbit did not intercept that either. 我通过让JQuery post-load修改了一个带有正确HTML的div来测试,Orbit也没有拦截。 Can anyone tell me how to get Orbit to fire post-load? 任何人都可以告诉我如何让Orbit在装载后开火吗?

      <div class="panel" id="minor-panel">
           <h3>Contact</h3>
           <ul data-orbit="">
                 <li>
                    <img src="img/contact part3_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>

                 <li>
                    <img src="img/contact part4_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>

                 <li>
                    <img src="img/contact part5_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>

                 <li>
                    <img src="img/contact part6_lbox.jpg">
                    <div class="orbit-caption">caption 1</div>
                 </li>
           </ul>
     </div>

Ugh, poor showing Stack Overflow. 呃,糟糕的显示Stack Overflow。 :( Anyhow, I dug through the JS and found the answer. Just make a call to: :(无论如何,我通过JS挖掘并找到答案。只需拨打电话:

Foundation.libs.orbit.init(); 

after each HTML update and it will properly format the slider. 每次HTML更新后,它将正确格式化滑块。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM