Question

这是给你的新手问题

我的堆栈：mongodb，node，ember，bootstrap 我正在使用ember-tools来帮助构建

我有一个bootstrap轮播，我试图从数据库中动态填充。数据库通过一个restful API访问，并加载到路径中的前端ember模型中。

model: function() {
  return $.getJSON('/headliners');
}

模型遵循以下模式：

{
    id:1, 
    active:true, 
    title:"This is a title", 
    description:"and a short description", 
    buttontext: "Learn More", 
    buttonurl: "http://www.blah.com", 
    imageurl:"/images/apicture.jpg"
}

如果active属性为true，则该类应为“item active”。如果为false，那么该类应该=“item”。这是试图实现这一目标的模板代码

{{#each model}}

    {{#if active}}          
        <div class="item active">   
    {{else}}
        <div class="item">
    {{/if}}

    <img {{bindAttr src="imageurl"}} />
    <div class="container">
      <div class="carousel-caption">
        <h1>{{title}}</h1>
        <p>{{description}}</p>
        <p><a class="btn btn-lg btn-primary" {{bindAttr href="buttonurl"}}">{{buttontext}}</a></p>
      </div>
    </div>
  </div>
{{/each}}

此模板按预期工作，但包含导致某些问题的变形标识符。（如果我删除了变形标识符，则页面呈现正确）

更具体地说，我遇到的问题是用于处理（#if）（else）的变形标识符正在影响轮播对象。

我很确定有一种常用的方法可以处理这种情况 - 如果active属性为true，那么修改类的最佳方法是什么，但删除变形标识符以使轮播视图不受影响？

Answer 1

Márcio以showin bootstrap和carousel为例给出了一个非常好的答案

couldn't get Bootstrap carousel to work with Ember

关于变形标记，它们存在用于更新值等。它们仅存在于绑定值上，您可以取消绑定值，并且不会在这些值周围注入变形标记（请参阅http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound）。这也意味着当底层值发生变化时，ui将不会更新。

Answer 2

@ kingpin2k马上得到了答案，但我只是想补充一下 - 使用Ember.js和Handlebars.js - 你应该从不做类似的事情

{{#if isTrue}}
<div class="some-class added-if-true">
{{else}}
<div class="some-class">
{{/if}}

~~，而是使用 bind-attr ：~~

~~<div {{bind-attr class=":some-class isTrue:added-if-true"}}>~~

~~，如下所示：http://emberjs.com/guides/templates/binding-element-class-names/~~

从Ember 2.0开始，您不必再使用bind-attr，但实际上您可以使用内联帮助程序来操作DOM Objects类列表，如下所示：

<div class="some-class {{if shouldAdd 'added-if-true' 'added-if-false'}}">

bootstrap carousel不工作，受ember变形标识符的影响

2 个答案: