隐藏 Table td 以防 JSON 大小为一

Question

我正在从 JSON 形成 table，如下所示

<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

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

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

或者您可以在控制器中计算属性 hides/shows 删除按钮，如下所示：

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

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

希望对您有所帮助！

Answer 2

可以通过简单的计算得到属性。该过程在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);
        }
    }
});

隐藏 Table td 以防 JSON 大小为一

Hide the Table td incase the JSON size is one

jquery

ember.js