Question

第一次尝试使用ractive模板 - 将整个html复制并粘贴到模板中。 JQuery也在单独的文件中。

<a id="test" href="#" data-toggle="modal" data-target="#modal-signup">Sign up new account</a>
    <div id="modal-signup" data-js-test>

此代码位于完整索引页面上，但modal位于不同的模板文件中。

$("#test").click(function(){

    var sign =  new Ractive({
      el: document.querySelector('[data-js-test]'),
      template: '#template',
      data : {
        error: false
      }

    });

但手风琴不起作用 - 它不会像jsfiddle中所示那样向上或向下滑动。我不确定是不是因为ra {<script id="template" type='text/ractive'>和html。有办法解决吗？尝试使用CSS3，但没有办法像这个jsfiddle示例那样使标签折叠或展开。

非常感谢帮助或指导。

Answer 1

保持您的基本设计，您可以执行此操作（有关完整示例，请参阅http://jsfiddle.net/kDUhU/1）。整理你的html，如：

<a id="test" href="#" data-toggle="modal" data-target="#modal-signup">Sign up new account</a>
    <div id="modal-signup" data-js-test>

<script id='template' type='text/ractive'>
    //ractive template goes here, see fiddle for full example
</script>

然后在你的javascript：

$("#test").click(function(){

    var sign =  new Ractive({
      el: document.querySelector('[data-js-test]'),
      template: '#template',
      data : {
          error: false,
          steps: [
              { 
                  name: 'Step 1 - Information',
                  color: 'yellow',
                  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc...'
              },
              ...
          ]
      }
    })

    // now apply your accordion logic
    $('.accordion div.content').slideToggle(0) 
    ...

});

对于更具“ractive”的示例，您可以使用幻灯片插件（请参阅http://jsfiddle.net/kDUhU/2/）。为了清晰起见，我删除了大部分格式，基本上你的模板变成了：

<script id='template' type='text/ractive'>
    <a href="#" on-click='show'>Sign up new account</a>
    {{# selected > -1 }}
    <div>
        <h3>Sign up a new account</h3>
        <div class="accordion">
            {{#steps:i}}
            <div id="step-{{i+1}}">
                <a href="#" on-click='select'>{{name}}</a>
                {{#selected===i}}
                <div intro-outro='slide' style="background: {{color}};">
                    {{content}}
                </div>
                {{/}}
            </div>
            {{/}}
        </div>
    </div>
    {{/}}
</script>

你的js是

var sign =  new Ractive({
    el: document.body,
    template: '#template',
    data : {
        steps: [
              { 
                  name: 'Step 1 - Information',
                  color: 'yellow',
                  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc'
              },
              ...
          ]
      }
})

sign.on('show', function(){
    this.set('selected', 0)
    sign.off('show')
})
sign.on('select', function(e){
    this.set('selected', e.index.i)  
})

最后，有点笨拙有一些限制，但只是为了好玩，这里是一个纯粹的CSS手风琴：http://jsfiddle.net/kDUhU/4/

模板的关键部分：

<label for='step{{i}}'>{{name}}</label>
<input name='steps' type='radio' id='step{{i}}' checked='{{i===0}}'>
<div intro-outro='slide' style="background: {{color}};">
    {{content}}
</div>

的CSS：

label {
    cursor: pointer;
    text-decoration: underline;
}
input[type=radio] {
    display: none;
}
input[type=radio]:not(:checked) + div {
    max-height: 0;
}
input[type=radio] + div {
    max-height: 2em;
    overflow: hidden;
    -webkit-transition: max-height 1s;

}

Ractive模板不适用于JQuery？

1 个答案: