Javascript 语法更改-从JQuery模板迁移到JsRender

在从JQuery模板迁移之后，有人能帮助我们如何呈现JSRender模板吗

使用旧的JQuery模板系统，我的HTML页面中有以下内容：

        <script id="pageTmpl1" type="text/x-jquery-tmpl">
        <div class="${theClass1}" style="${theStyle1}">
            <div class="front1">
                <div class="outer1">
                    <div class="content1" style="${theContentStyleFront1}">
                        <div class="inner1">{{html theContentFront1}}</div>
                    </div>
                </div>
            </div>
            <div class="back1">
                <div class="outer1">
                    <div class="content1" style="${theContentStyleBack1}">
                        <div class="inner1">{{html theContentBack1}}</div>
                    </div>
                </div>
            </div>
        </div>

有人知道为了迁移到JSRender，我必须如何修改上面的基本设置吗

编辑：

谢谢你的回复

为了给我的问题提供一些背景，这里有两个例子；第一个使用jQuery模板，第二个（带有建议的更改）使用JSRender

尽管遵循所指示的语法变化，但最终没有出现期望的结果（在第二种情况下），没有错误

所做的更改来自：

        <script id="pageTmpl" type="text/x-jquery-tmpl">
        <div class="${theClass}" style="${theStyle}">
            <div class="front">
                <div class="outer">
                    <div class="content" style="${theContentStyleFront}">
                        <div class="inner">{{html theContentFront}}</div>
                    </div>
                </div>
            </div>
            <div class="back">
                <div class="outer">
                    <div class="content" style="${theContentStyleBack}">
                        <div class="inner">{{html theContentBack}}</div>
                    </div>
                </div>
            </div>
        </div>          
    </script>

致：

在jquery.flips.js中

---

如果您能提供任何关于这一点的建议，我们将不胜感激

这是一个使用jQuery模板的页面：

下面是使用jsRender的等价页面：
（）

你看到了吗

jQuery模板：

$("#movieTemplate").tmpl(movies).appendTo("#movieList");

映射到：

jsRender

$("#movieList").html(
    $("#movieTemplate").render(movies)
);

事实上，JsRender不使用DOM进行渲染

因此，您也可以将上述内容写成：

var html = $("#movieTemplate").render(movies); // Render to string
$("#movieList").html(html); // Insert in DOM

或者你可以写：

var compiledTemplate = $.templates("#movieList"); // Compile template
var html = compiledTemplate.render(movies);  // Render to string
$("#movieList").html(html); // Insert in DOM

基于字符串的呈现是使用JsRender的原因之一

关于模板标记的映射方式，以下是一些基本标记：

jQuery模板：

$("#movieTemplate").tmpl(movies).appendTo("#movieList");

• ${name}

• {{html大纲}

• {{if languages}}…{{else subtitles}}…{{{else}}…{{/if}}

• {{each languages}}…{{/each}

jsRender

$("#movieList").html(
    $("#movieTemplate").render(movies)
);

• {{:name}

  （请参阅）

• {{>概要}

  （参见）

• {{if languages}}…{{else subtitles}}…{{{else}}…{{{/if}}

  
  （此处无更改：请参阅）

• {{for languages}}…{{/for}

  （请参阅）

---

$（“#pageTmpl”）。render（pageData）似乎正在呈现正确的HTML。你的意思是写：this.$el.html（$（“#pageTmpl”）.render（pageData））$（“这个.$el”）看起来一点都不对劲……你当然是对的！我的错。我现在看到的是，并不是所有的“页面”内容都能通过。您可以在中看到一个示例。只显示内容的最后一页以及封底$flipPages应该总共收集4页内容-加载时的警报表明只有1页（与之相比）。你知道为什么会这样吗？我认为很明显JsRender工作正常，但你需要弄清楚你的应用程序行为和jQuery使用情况，以修复任何剩余的bug/问题。查看先前使用append（）的行为与使用html（）的新行为之间的关系。您可能需要追加而不是替换。（html（）方法将每次替换内容…）顺便说一句，您可以利用JsRender的行为将页面呈现为数组-将数组传递给tmpl。render（myArray）将根据模板呈现每个项目，并连接结果。您还可以探索如何使用JSView来使用数据绑定-请参阅。JsViews做了一些很酷的数据链接（绑定）到数组。。。

var html = $("#movieTemplate").render(movies); // Render to string
$("#movieList").html(html); // Insert in DOM

var compiledTemplate = $.templates("#movieList"); // Compile template
var html = compiledTemplate.render(movies);  // Render to string
$("#movieList").html(html); // Insert in DOM