emberjs {{#if variable}}布尔值不会显示为true

时间:2014-02-21 16:45:45

标签: model-view-controller ember.js controller conditional handlebars.js

我在'categories'控制器中设置了一个简单的布尔值(isEditing)来等于'true' 点击了{{action“edit”this}}按钮。

单击“编辑”时,变量不会将自身设置为true。我console.log以确保'编辑'知道我点击它,它确实。这在emberjs网站上看起来很简单,我不知道为什么我现在遇到这样的麻烦。

类别控制器

VpcYeoman.CategoriesController = Ember.ArrayController.extend({
    isEditing: false,
    actions: {
        editingyeah: function(){
            console.log('Testing console'); //this works
            this.set('isEditing', true); //this doesnt change to true since the {{Else}} is what is being rendered.
        }        
    },

});

categories.hbs

    {{#each}}
      <tr class="people-list">
        <td>
          {{#if isEditing}}
          {{view Ember.TextField valueBinding=name}}
          NOOOOOOOO
          {{else}}
          <div class="category-text"> 
          {{view Ember.TextField valueBinding=name}}
            {{#linkTo 'category' this}}
              {{name}}
            {{/linkTo}}
          </div>
          {{/if}}  
          <img class="table-img" src="images/x.png">
          <img class="table-img" {{action "editingyeah" this}} src="images/pencil-grey.png">          
        </td>
      </tr>
    {{/each}}

2 个答案:

答案 0 :(得分:4)

这是因为您循环遍历每个类别,因此each帮助程序中的上下文是您的类别。它正在寻找类别上的isEditing属性,而不是控制器中的属性。

由于您将类别传递给操作,因此您可以在操作函数中将其作为参数进行访问,并在类别上设置属性:

actions: {
    editingyeah: function(category){
        category.set('isEditing', true);
    }        
}

答案 1 :(得分:1)

我在发表评论后看到了你的问题。您的范围中没有定义isEditing变量。您正在使用#each帮助程序,它会更改模板的范围。您必须在使用#each时保留范围,或使用#with帮助程序。

{{#each item in model}}
    {{! isEditing is available now }}
    {{! But you have to do item.name instead of name}}
{{/each}}

或者

{{#with this.isEditing as isEditing}}
    {{#each}} ... {{/each}}
{{/with}}