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（一），我该如何隐藏删除td（最后一个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}}

我希望有所帮助！

隐藏表td，如果JSON大小为1

2 个答案: