- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
谁能帮忙解决从 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>
然后从一个单独的 js 文件中启动它 - 在此文件中摘录,其中 $( '#pageTmpl1' ).tmpl( pageData ).appendTo( this.$el );
是关键部分:
_layout : function() {
this._setLayoutSize();
for( var i = 0; i <= this.pagesCount - 2; ++i ) {
var $page = this.$pages.eq( i ),
pageData = {
theClass1 : 'page1',
theContentFront1 : $page.html(),
theContentBack1 : ( i !== this.pagesCount ) ? this.$pages.eq( i + 1 ).html() : '',
theStyle1 : 'z-index: ' + ( this.pagesCount - i ) + ';left: ' + ( this.windowProp.width / 2 ) + 'px;',
theContentStyleFront1 : 'width:' + this.windowProp.width + 'px;',
theContentStyleBack1 : 'width:' + this.windowProp.width + 'px;'
};
if( i === 0 ) {
pageData.theClass1 += ' cover1';
}
else {
pageData.theContentStyleFront1 += 'left:-' + ( this.windowProp.width / 2 ) + 'px';
if( i === this.pagesCount - 2 ) {
pageData.theClass1 += ' cover-back1';
}
}
$( '#pageTmpl1' ).tmpl( pageData ).appendTo( this.$el );
}
this.$pages.remove();
this.$flipPages = this.$el.children( 'div.page1' );
this.flipPagesCount = this.$flipPages.length;
this._adjustLayout( ( this.state === undefined ) ? this.currentPage : this.state );
},
有谁知道我必须如何更改上面的基本设置才能迁移到 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>
到:
<script id="pageTmpl" type="text/x-jsrender">
<div class="{{:theClass}}" style="{{:theStyle}}">
<div class="front">
<div class="outer">
<div class="content" style="{{:theContentStyleFront}}">
<div class="inner">{{>theContentFront}}</div>
</div>
</div>
</div>
<div class="back">
<div class="outer">
<div class="content" style="{{:theContentStyleBack}}">
<div class="inner">{{>theContentBack}}</div>
</div>
</div>
</div>
</div>
在 index.html 中,来自:
$( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
到:
$("this.$el").html(
$("#pageTmpl").render(pageData)
);
在 jquery.flips.js 中。
如果您能就此原因提供任何建议,我们将不胜感激。
最佳答案
这是一个使用jQuery 模板 的页面:
jquery-tmpl/demos/step-by-step/.../0_local-data-source.html .
这是使用 jsRender 的等效页面:
jsrender/demos/step-by-step/01_inserting-data.html (Code here)。
所以你看到了
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
基于字符串的呈现是 better perf 的原因之一使用 JsRender。
关于模板标签如何映射,这里有一些基本的标签:
jQuery 模板:
${name}
{{html 概要}}
{{if languages}}...{{else subtitles}}...{{else}}...{{/if}}
{{each languages}}...{{/each}}
jsRender
关于javascript - 语法更改 - 从 JQuery 模板迁移到 JsRender,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24722222/
在此处回答的另一个问题中,我发现了以下 JavaScript代码: function _dom_trackActiveElement(evt) { if (evt && evt.target)
if (A == 0) OR (B == 0) 怎么说? 最佳答案 只是为了讽刺: if (A === 0 || B === 0) 关于语法,我们在Stack Overflow上找到一个类似的问题:
var ret = [] ,xresult = document.evaluate(exp, rootEl, null, X
我一直在寻找一些类似于下例的 JavaScript。有人可以解释一下吗,因为我以前从未见过这样编写的 JavaScript。 “SomethingHere”和冒号代表什么?我习惯于看到函数 myFun
这是我的程序: delimiter // drop procedure if exists migContactToActor; create procedure migContactToActor(
我遇到了一个问题。我一直在使用 gcc 编译/汇编我的 C 代码一段时间,并且习惯了阅读 Intel 汇编语法。我在生成程序集文件时使用了 -masm=intel 标志。 但是最近因为公司迁移,拿到了
自上而下和自下而上语法有什么区别?举个例子就太好了。 最佳答案 首先,语法本身不是自上而下或自下而上的,解析器是(尽管有些语法可以被其中一个解析,但不能被另一个解析)。 从实践的角度来看,主要区别在于
我知道这是草率的代码,但它是: display dialog ("Start Screensaver. Please type: matrix, coffee, waffles, star, wate
这个问题已经有答案了: Giving name to a loop (6 个回答) 已关闭 8 年前。 我见过这个字符在 C# 中使用,就像 Java 中的扩展一样,但最近我在代码中发现了这个 loo
我正在尝试编写一个函数来检查字符串是否为回文,但我认为在使用字符串指针时存在一些错误。这段代码有什么问题? #include #include #define MAX 1000 int IsPalin
所以在this question我询问了一些 Javascript 是如何被压缩的。问题已得到解答,但以下片段让我非常困惑,以至于我不得不问另一个问题。在这里: for (Y = 0; $ = 'zx
假设我有一个接受这些参数的函数。 int create(Ptr * p,void * (*insert)(void *, void *)) { //return something later } 结
这个问题已经有答案了: Bitwise '&' operator (6 个回答) 已关闭 5 年前。 我在代码中找到了这个,但我从未遇到过像 & 这样的事情,仅 && if ((code & 1) =
我在处理继承类及其中的构造函数和方法的语法时遇到了问题。 我想实现一个类日期和一个子类 date_ISO,它们将按特定顺序设置给定的日、月、年,并通过一种方法将其写入字符串。我觉得我的基类日期工作正常
我正在尝试通过存储过程填充表,如下所示: SET @resultsCount = (SELECT COUNT(*) FROM tableA); SET @i = 0; WHILE @i THEN
谁能解释一下下面代码中的“<<”? mysql test<
刚刚开始学习 MySQL,这是一个菜鸟问题,也是我在 StackOverflow 上的第一个问题。 假设我有 12 个订单状态,我想从其中的 5 个中选择总计。我会使用: SELECT SUM(tot
我的编程背景是在学校学过一点Java。由于某些原因,JavaScript 语法往往让我感到困惑。下面的 JavaScript 代码是一种我不知道如何构成的语法模式: foo.ready = funct
我正在阅读 javascript 源代码,并且我以前没有编写过 javascript。我对它的一些语法感到困惑。 $(function () { window.onload=function
我什至不知道如何命名我想要的东西。那么让我举个例子来解释一下。 虽然火狐使用textContent,但其他浏览器支持innerText属性。顺便说一句,如果我使用了错误的术语,请纠正我。无论如何,到目
我是一名优秀的程序员,十分优秀!