- 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/
我最近开始从事一个 Sails 项目。它目前在迁移表下具有以下格式的迁移。 20160826122004-create_users_table.js 'use strict'; module.expo
当我尝试迁移时 doctrine:migrations:migrate ,我收到此异常:“元数据存储不是最新的,请运行 sync-metadata-storage 命令来解决此问题。”。这仅在尝试在生
我在 ec2 linux 7 上有一个 MarkLogic 服务器。我想将它迁移到 linux 6。我将 ebs 移动到新的 linux 6 并将其安装在 /var/opt/MarkLogic . 我
我对 OpenID 很好奇。虽然我同意统一凭证的想法很棒,但我有一些保留意见。什么是防止 OpenID 提供商发疯并持有他们拥有的 OpenID 帐户直到您支付 n 美元?如果我决定不喜欢这个提供商,
使用 SQL 很容易做到这一点,但我需要编写一个我不熟悉的 Knex 迁移脚本。以下代码在 order 表中行的末尾添加了 order_id 列。我想在 id 之后添加 order_id。我该怎么做?
使用 SQL 很容易做到这一点,但我需要编写一个我不熟悉的 Knex 迁移脚本。以下代码在 order 表中行的末尾添加了 order_id 列。我想在 id 之后添加 order_id。我该怎么做?
我想通过在 Yii2 中的迁移添加一个新列,使用以下代码: public function up() { $this->addColumn('news', 'priority', $this-
我正在尝试在 SQLDelight 的表中添加更多列。我做了一个迁移文件 1.sqm .在迁移文件中,它给出了找不到表的错误。 我的 build.gradle.kts: sqldelight {
我有一个与 Flyway DB 迁移相关的问题。通常如何管理处理相同 DB 模式的多个项目(微服务)。每个项目中的 Flyway 迁移脚本如果被其他项目修改,则不允许启动。他们是否有任何文档或最佳实践
我是 Laravel 的新手。我做了一份待办事项申请作为一项学校作业。我们必须使用迁移来创建我们的数据库。 我使用迁移创建了 2 个表。我的问题是:如果你第一次在你的电脑上运行这个项目,有没有办法自动
我正在尝试在 Laravel 中创建外键,但是当我使用 artisan 迁移表时,出现以下错误: [Illuminate\Database\QueryException] SQLSTATE[HY000
我从 Django 1.7 升级到 Django 1.9。我有多次迁移。升级后我无法再创建新的数据库。 问题是“django manage.py migrate”运行检查。检查导入应用程序 URL。这
我在创建数据迁移方面遇到了困难。我的应用程序使用两个数据库。我在 settings.py 中配置了数据库,并创建了一个像 Django docs 中一样的路由器. # settings.py DB_H
我有一个像这样的sql结构: CREATE TABLE resources ( id SERIAL PRIMARY KEY, title TEXT NOT NULL, created_at
我正在尝试使用模式构建器向表添加枚举选项(不丢失当前数据集)。 我真正能够找到的关于列更改的唯一信息是 http://www.flipflops.org/2013/05/25/modify-an-ex
我尝试转移到一些 CMake 程序中,并且有一个从 xml 生成头文件的函数。 生成文件.am adaptor_glue.hpp: dbus_introspect.xml $(DBUSXX_X
我想将文件移至我的 iOS 应用程序的 CoreData 存储 ../Library/Application Support/MyApp/ 至 ../Documents/Stores/ 我可以使用 N
有没有人对数据迁移进出 NetSuite 有丰富的经验?我必须将 DB2 表导出到 MySQL,处理数据,然后导出到一个 CSV 文件中。然后获取帐户的 CSV 文件并再次操作数据以使帐户从我们的旧系
我正在尝试在 Django 上建立一个博客。我已经走到了创建模型的地步。他们在这里: from django.db import models import uuid class Users(mode
我最近使用 bluehost 上的 AutoSSL 工具将网站迁移到 HTTPS。我在内容中看到一些失真,例如缺少背景颜色、表格位移、缺少_logos 等。 有谁知道 HTTPS 迁移效果如何影响样式
我是一名优秀的程序员,十分优秀!