Ractive 模板不适用于 JQuery？答案

【问题标题】：Ractive template does not work with JQuery?Ractive 模板不适用于 JQuery？
【发布时间】：2023-03-28 01:41:02
【问题描述】：

第一次尝试使用 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>

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

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

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

    });

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

我们将非常感谢您的帮助或指导。

【问题讨论】：

您只是想使用 Ractive 来进行数据驱动吗？或者您是否也在寻找使用 Ractive 制作手风琴幻灯片功能？
@martypdx - 两者都 - 手风琴表单将是数据驱动的（更像是在批准注册之前匹配字段），是的，我一直在谷歌上寻找具有 ractive 的手风琴幻灯片功能，但我有点迷失了了解 racactive 的工作原理。

标签： jquery css ractivejs

【解决方案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) 
    ...

});

对于更“活跃”的示例，您可以使用幻灯片插件（请参阅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;

}

【讨论】：