隐藏表 td 以防 JSON 大小为 1

Question

我正在从 JSON 形成一个表格，如下所示

<script type="text/x-handlebars" data-template-name="index">
   <table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>Participant</th>

        </tr>
    </thead>
    <tbody id="ParticipantList">
        {{#each person in model}}
            <tr>
                <td> {{person.name}}</td>
                    <td> {{person.city}}</td>
            <td><img src="image.jpg" alt="Remove"></td>
            </tr>
        {{/each}}
    </tbody>
   </table>
</script>

如果 JSON 的大小为 1（一），我如何隐藏 Remove td (last td)

http://jsfiddle.net/6Evrq/1805/

Answer 1

可以通过一个简单的计算属性来实现。流程在IndexController实现。

Working Fiddle

模板：

<script type="text/x-handlebars">
   {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
   <table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>Participant</th>
        </tr>
    </thead>
    <tbody id="ParticipantList">
        {{#each person in model}}
            <tr>
                <td> {{person.name}}</td>
                <td> {{person.city}}</td>
                {{#if ismorethanone}}
                     <td><img src="image.jpg" alt="Remove" {{action "removeUser" person.name}}></td>
                {{/if}}
            </tr>
        {{/each}}
    </tbody>
   </table>
</script>

JS部分：

App = Ember.Application.create();

App.Router.map(function () {
    // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return [ {"name": "John", "city": "New York"},
                {"name": "SAAA","city": "California"},
                {"name": "Vignesh","city": "India"}]
    }
});

App.IndexController = Ember.Controller.extend({
    ismorethanone : function(){
            return this.get("model").length>1;
    }.property("model.length"),

    actions :
    {
        removeUser:function(name){
            var model = this.get("model").filter(function(obj){
                 return obj.name!=name;
            });
            this.set("model",model);
        }
    }
});

Answer 2

您可以像这样使用 if 和 eq ember 助手：

 {{#if (eq model.length 1)}}
        <td><img src="image.jpg" alt="Remove"></td>
 {{/if}}

或者你可以在你的控制器中有一个计算属性来隐藏/显示删除按钮，如下所示：

//YourController.js
hideRemoveBtn: Ember.computed.equal('person.length', 1)

//html 
 {{#unless hideRemoveBtn}}
        <td><img src="image.jpg" alt="Remove"></td>
 {{/unless}}

希望对你有帮助！