Articles of handlebars.js

帮手在手柄上打印HTML标签

我有这个试图dynamic创build这个表的句柄代码 <tr> {{#each this}} {{#ifCond this }} {{/ifCond}} {{/each}} </tr> 现在我有一个像这样定义的句柄帮助器(在res.render中发送这个帮助器,所以像这样) 'ifCond': function( state ) { if(state == "success") return Spacebars.SafeString('<td class="tile-green">' + state + '</td>'); else if( state == "failure") return Spacebars.SafeString('<td class="tile-red">' + state + '</td>'); else if (state == "unknown" return Spacebars.SafeString('<td class="tile-orange">' + state + '</td>'); else return Spacebars.SafeString('<td>' + state […]

把手js不迭代对象

我正在使用node.js构build应用程序,并使用服务器端和客户端模板的句柄。 不过,我在迭代对象时遇到了问题。 这是我的代码: 我的.js文件: $(function () { var theTemplateScript = $("#update_address_distributor_template").html(); context.city = 'london'; var theTemplate = Handlebars.compile(theTemplateScript); var theCompiledHtml = theTemplate(context); $('.update_address_distributor_template_placeholder').html(theCompiledHtml); }); 我的html文件: <script id="update_address_distributor_template" type="text/x-handlebars-template"> <form class="form-horizontal" role="form" id="update_distributor_form"> \{{city}} //correctly prints out london \{{address_distributors.length}} //returns 2, so i know the object exists {{#each address_distributors}} \{{name}} //does not print anything {{/each}} </form> […]

如何在布局的快速句柄中使用侧边栏和主要内容

我有一个快速的手柄应用程序与main.hbs作为布局文件。 //main.hbs <html> <head></head> <body> {{> header}} {{{body}}} <script src='/js/jquery-2.2.4.min.js'></script> <script src='/js/bootstrap.min.js'></script> </body> </html> 当我点击一个链接让我们说仪表板页面中的“设置”,然后它redirect到设置页面,我有侧边栏和主要内容页面。 此页面也使用main.hbs作为布局。 //settings.hbs <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="/settings/account">Account<span class="sr-only">(current)</span></a></li> <li><a href="/settings/view">Views</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sites</a></li> </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <ol class="breadcrumb"> <li class="active">Settings</li> </ol> <div id="settingsContainer"> //Content should […]

Hapijs上的angular度代码,由视图引擎的nodejs的手柄

虽然在hapi做了api之后。 我决定在hapijs的文件夹结构中创build一个视图文件来呈现html文件。 我已经在hapijs上使用了handlebars引擎和Vision支持库来显示html文件。 一切正常,当我运行正常的HTML代码,但是当我使用angular码,它给出了一些parsing错误。 我认为有可能是视图引擎句柄问题。 请帮忙 当我运行节点服务器并点击视图调用的path时,这是错误的 Error: Parse error on line 144: … <td> {{(titleData.Success ———————–^ Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'OPEN_SEXPR': Parse error on line 144: … <td> {{(titleData.Success // HTML代码在这里 <div class="table-responsive" ng-controller="titleController"> <h4 align="center">Title Data</h4> <table ng-init="titleData.total = {}" class="table table-condensed" border="1"> <thead> <tr> <th>#</th> <th colspan="2"><center>SeWise</center></th> […]

使用#each在handlebars.js中显示一些数据而不显示

您好有一个项目,我将一个静态网站转换为一个数据驱动,现在我只是想改变,所以每个网页的内容是通过一个数据对象进入网站。 我正在使用:node.js,handlebars,express 我的index.js文件有这样的对象 var item = [{ pagetitle: 'Page 1', text: 'content page 1' }, { pagetitle: 'Page 2', text: 'content page 2' }, { pagetitle: 'Page 3', text: 'content page 3' }, { pagetitle: 'Page 4', text: 'content page 4' }, { pagetitle: 'Page 10', text: 'content page 10' }]; 我的index.hbs看起来像这样 <div class="bb-blah"> {{title} […]

使用Handlebars.compile的问题

我试图让把手安装预编译模板。 我按照安装说明(http://handlebarsjs.com/precompilation.html),我似乎没有任何问题运行安装(见下文)。 但是,当我发出编译命令… handlebars users.handlebars -f templates.js 无法findhandlebars命令。 -bash: handlebars: command not found 想知道这一个线索。 (username) ~$ which npm /usr/local/bin/npm (username) ~$ which node /usr/local/bin/node (username) ~$ npm install -g handlebars npm http GET https://registry.npmjs.org/handlebars npm http 304 https://registry.npmjs.org/handlebars npm http GET https://registry.npmjs.org/uglify-js npm http GET https://registry.npmjs.org/optimist npm http 304 https://registry.npmjs.org/uglify-js npm http 304 https://registry.npmjs.org/optimist npm […]

meteor模板没有使用点击事件进行更新

我试图做一个使用meteor会议(坚持视图的用户是)的反应式菜单..但它不工作,Session.get('currentView')得到改变(在Chrome控制台的teste),但页面不要再次渲染。 html的 <div class="col-1-1 menu" style="height: 42px;"> <ul> <li><a class="dashButton" href="#"># Dashboard</a></li> <li><a class="myJobsButton"href="#">Jobs</a></li> <li><a class="helpPageButton"href="#">Help</a></li> </ul> <br style="clear:left"/> </div> {{#if currentViewIs "dashboard"}} {{> dashboard}} {{else}} {{#if currentViewIs "myJobs"}} {{> myJobs}} {{else}} {{#if currentViewIs "helpPage"}} {{> helpPage}} {{else}} {{> dashboard}} {{/if}} {{/if}} {{/if}} client.js Template.userPage.currentViewIs = function (view) { if( Session.get('currentView') == view) return true; […]

将对象转换为Meteor.JS把手中的数组后,无法拆分string

手把助手arrarify用于将对象的对象转换为对象的数组 handlebarsHelper.js Handlebars.registerHelper('arrayify',function(obj){ result = []; for (var key in obj) result.push({name:key,value:obj[key]}); return result; }); 客户端/视图/ main.html中 <template name="orderList"> {{#each arrayify orderList}} {{value.amount}} {{ value.name }} {{/each}} </template> 客户端/视图/ main.js Template.orderList.orderList = function() { // Retrieved from Collection orderList = { 12345: {name: "apples_mackintosh", amount: 10}, 12346: {name: "oranges_sunkiss", amount:5} }; return orderList; }; 问题:如何将模板值oranges_sunkiss呈现为“ […]

Node Express Handlebars助手不返回函数的结果

我对这个感到困惑。 如果我在一个句柄帮助器中使用一个函数并返回该函数的结果,则不会返回任何结果。 这是模板: <ul> <li>{{formatid this.id}}</li> </ul> 这里是帮手: formatid : function(id){ mOrders.formatOrderID(id, function(err, formatted_id){ // err is always null, no need to handle console.log(formatted_id); return formatted_id; }); } 然而,尽pipe正确的文本被logging到控制台,结果html是: <ul> <li></li> </ul> 但是,如果我在formatOrderID()函数结束之后放置了一个返回值,它将返回,所以: formatid : function(id){ mOrders.formatOrderID(id, function(err, formatted_id){ // err is always null, no need to handle console.log(formatted_id); return formatted_id; }); return 'some_text'; } […]

为什么不更新default.hbs显示在博客上?

我已经在Amazon EC2实例上安装了Ghost,到目前为止它已经运行得非常好。 今天,我想在主题的default.hbs(我使用默认的casper主题)进行一些更改,以获得代码语法突出显示。 (我试图添加棱镜。)我编辑了content / themes / casper / default.hbs文件,并添加了css和js,如下所示: <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" /> 但是,这些更改没有显示在我的博客上。 然后,为了testing我的编辑是否正常工作,我在site-wrapper div之后添加了一些内容: <div class="site-wrapper"> <h2>Testing editing the default.hbs</h2> 但是,这些变化也没有在博客上显示出来。 我已经尝试重新启动幽灵,并重新启动整个Web服务器。 可能是什么问题? 我是否必须以某种方式重新编译网站,或者删除一些caching等?