标签: htmlbars

在Ember.js中组合linkTo和动作助手

我需要在Ember.js中组合linkTo和action helpers.我的代码是:

{{#link-to 'index'}}<span {{action 'clear'}}>Clear</span>{{/link-to}}
Run Code Online (Sandbox Code Playgroud)

但我想这样做:

{{#link-to 'index' {{action 'clear'}} }}Clear{{/link-to}}
Run Code Online (Sandbox Code Playgroud)

并且:

<li>
    {{#link-to 'support'}}
        <span {{action 'myAction' 'support'}}>Support</span>
    {{/link-to}}
</li>
Run Code Online (Sandbox Code Playgroud)

至:

<li>
    {{#link-to 'support' {{action 'myAction' 'support'}} }}Support{{/link-to}}
</li>
Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点?

检查我对Ember 2.0兼容的答案,确定SEO解决方案.

javascript handlebars.js ember.js ember-components htmlbars

30
推荐指数
5
解决办法
3万
查看次数

HtmlBars中的条件类

在常规车把我能够做到:

<div {{bind-attr class="model.isNew:new:old"}}>
Run Code Online (Sandbox Code Playgroud)

我怎么能在Htmlbars中这样做?我尝试了这个,但它没有用.

<div class="{{model.isNew:new:old}}">
Run Code Online (Sandbox Code Playgroud)

ember.js htmlbars

24
推荐指数
1
解决办法
1万
查看次数

如何将多个内容生成到ember.js组件模板中?

目标是定义HTML结构,该结构具有由调用者声明的多个内容块.例如,标题,正文和内容.生成的标记应该是:

<header>My header</header>
<div class="body">My body</div>
<footer>My footer</footer>
Run Code Online (Sandbox Code Playgroud)

实例化的组件的模板将定义这三个部分,My header,My body,和My footer.

使用Ruby on Rails,您将使用content_for :header从调用者捕获标头内容并yield :header进行插值.

这可能在ember.js中吗?

handlebars.js ember.js htmlbars

16
推荐指数
2
解决办法
5921
查看次数

Ember组件集成测试:`link-to` href为空

我正在尝试编写一个组件集成测试,这个博客文章,但我的组件有link-to一个动态路由,并且该href属性没有填写.这是我正在尝试做的简化版本.

我的组件的模板:

{{#link-to "myModel" model}}
Run Code Online (Sandbox Code Playgroud)

这是我测试的相关部分:

this.set('model', {
  id: 'myId',
  name: 'My Name'
});

this.render(hbs`
{{my-component model=model}}
`);

assert.equal(this.$('a').attr('href'), '/myModel/myId'); // fails
Run Code Online (Sandbox Code Playgroud)

link-to被渲染,只是没有href属性.如果我在测试中记录HTML,它看起来像:

<a id="ember283" class="ember-view">My Name</a>
Run Code Online (Sandbox Code Playgroud)

我需要对我的"模型"做些什么才能获得link-tohref?我试着link-to在ember中查看测试,并发现这部分测试,这基本上就是我正在做的事情 - 提供一个带有id键集的POJO .有任何想法吗?

编辑:

DEBUG: -------------------------------
DEBUG: Ember      : 1.13.8
DEBUG: Ember Data : 1.13.10
DEBUG: jQuery     : 1.11.3
DEBUG: -------------------------------
Run Code Online (Sandbox Code Playgroud)

javascript integration-testing ember.js htmlbars

10
推荐指数
3
解决办法
2619
查看次数

将单击的DOM元素的引用传递给Ember中的操作处理程序

我有一组按钮,其状态我希望与班级切换active.如果我只有一个按钮,那么我会将active类绑定到控制器属性并在单击处理程序中切换该属性:

<button {{action 'toggle'}} class="{{active}}">model.title</button>

actions: {
  toggle: function() {
    this.set('active', true);
  }
}
Run Code Online (Sandbox Code Playgroud)

但我有多个按钮,所以我不确定我能绑定什么.如果我可以将对单击按钮的引用传递给动作处理程序,那将非常有用,但我不知道如何执行此操作.

{{#each item in model}}
  <button {{action 'toggle' referenceToButton}}>model.title</button>
{{/each}}

actions: {
  toggle: function(buttonReference) {
    // add `active` class to buttonReference
  }
}
Run Code Online (Sandbox Code Playgroud)

完成此任务的最佳方法是什么?

ember.js htmlbars

9
推荐指数
3
解决办法
8980
查看次数

如何强制Ember.Component重新渲染?

有没有办法让Ember.Component强制重新渲染?

.rerender()方法,但没有帮助.我也尝试使用.notifyPropertyChange模板,layoute - 相同

现在对于这种情况我需要将一块模板if包装成包装并切换标志的值.但方式是丑陋和无聊.

有任何想法吗?

components ember.js htmlbars

9
推荐指数
1
解决办法
1482
查看次数

如何在HTMLBars中编写助手?

在最新发布的EmberJS之后,v1.9.0我试图从Handlebars转移到HTMLbars.我发现非常具有挑战性的是缺乏文档.

我正在尝试实现非常简单的帮助器.

例如,拿这个把手帮手:

HTML

<div id="main"></div>

<script type="text/x-handlebars" data-template-name="index">
    {{logIt test}}
    <h1>{{test}}</h1>
</script>
Run Code Online (Sandbox Code Playgroud)

JS

App = Ember.Application.create({
    rootElement: '#main'
});

    App.IndexRoute = Ember.Route.extend({
        setupController: function(controller){
            controller.set('test', 'mytest');
        }
    });

    Ember.Handlebars.registerHelper("logIt", function(something) {
        console.log(something);
    });
Run Code Online (Sandbox Code Playgroud)

Js Fiddle:http://jsfiddle.net/sisir/p463q2L8/

如何将其转换为htmlbars?

javascript handlebars.js ember.js handlebarshelper htmlbars

6
推荐指数
1
解决办法
2674
查看次数

使用 HTMLbars 在 ember 中编译模板客户端

我创建了一个 CMS,可以使用 HTMLbars 创建模板。模板应该在客户端编译,并且有一个组件应该显示模板。我将组件的 template 属性设置为一个函数,该函数使用 HTMLBars 返回编译后的模板。

import Ember from 'ember';

export default Ember.Component.extend({
  content: null,
  template: function () {
    return Ember.HTMLBars.compile(this.get('content.template'));
  }
}
Run Code Online (Sandbox Code Playgroud)

我已将 ember-template-compiler 包含在我的 Brocfile 中。

app.import('bower_components/ember/ember-template-compiler.js');
Run Code Online (Sandbox Code Playgroud)

也测试过

app.import('bower_components/ember-template-compiler/index.js');
Run Code Online (Sandbox Code Playgroud)

但模板永远不会被渲染。

ember.js htmlbars

5
推荐指数
1
解决办法
1652
查看次数

Ember.js动态组件

我有两个模型Admin,User 我的应用程序模板如下

//application.hbs
{{outlet}}
{{header-nav}}
Run Code Online (Sandbox Code Playgroud)

我想做的事情(如果可能的话)可以{{header-nav}}自定义,我解释一下:如果admin我想在身份验证中呈现组件{{admin-header}}user身份验证它应该呈现的身份验证{{user-header}}.如何application.hbs动态构建要呈现的内容?

javascript handlebars.js ember.js htmlbars

5
推荐指数
1
解决办法
280
查看次数

如何修复Ember 1.13.9中弃用的Ember.Handlebars.registerBoundHelper?

我目前正在从Ember 1.8.1升级到Ember 1.13.9.我的应用程序是一种oldschool,不使用ember-cli(没有es6任何语法).

如何正确替换已弃用的Ember.Handlebars.registerBoundHelper:

Ember.Handlebars.registerBoundHelper('date-ago',function(date) {
  return moment.utc(date).fromNow();
});
Run Code Online (Sandbox Code Playgroud)

会建议你

DEPRECATION: `Ember.Handlebars.registerBoundHelper` is deprecated. 
Please refactor to use `Ember.Helpers.helper`. 
[deprecation id: ember-htmlbars.register-bound-helper]
Run Code Online (Sandbox Code Playgroud)

所以我想用'Ember.Helper.helper'替换'Ember.Handlebars.registerBoundHelper'会这样做,但是这些帮助器不再可用了:"未捕获的错误:断言失败:一个名为'date-ago'的助手不能找到了!".

如何在没有ES6语法或ember-cli魔法的情况下在Ember 2.0中注册htmlbars助手?

ember.js deprecation-warning htmlbars

4
推荐指数
1
解决办法
1365
查看次数