jeudi 1 octobre 2015

Hiding/Display section in EmberJS

I would like to conditionally hide/display part of a htmlbars template, however I would not like it to be removed from the DOM. If I use the {{if}} block helper it removes it from the DOM. I manage to accomplish this changing the class name with an inline {{if}} helper. I would like to know to if there is a better way to accomplish this?

<div class="{{if (not isEnglishSelected) 'hidden'}} {{if isEnglishSelected 'show'}}">

        <div class="form-group">
            <label class="col-sm-2 col-md-3 control-label" for="name_en">{{t 'label.name'}}</label>

            <div class="col-sm-10 col-md-9">
                {{input type="text" class="form-control" id="name_en" value=model.name_en autofocus=true}}
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 col-md-3 control-label" for="description_en">{{t 'label.description'}}</label>

            <div class="col-sm-10 col-md-9">
                {{textarea class="form-control" id="description_en" value=model.description_en rows="5"}}
            </div>
        </div>

        <div class="form-group {{if (not isEnglishSelected) 'show'}} {{if isEnglishSelected 'hidden'}}">
            <label class="col-sm-2 col-md-3 control-label" for="description_fr">{{t 'label.description'}}</label>

            <div class="col-sm-10 col-md-9">
                {{#if isEnglishSelected}}
                    {{textarea class="form-control"
                    id="description_fr" value=model.description_en rows="5"}}
                {{else}}
                    {{textarea class="form-control" id="description_fr" value=model.description_fr rows="5"}}
                {{/if}}
            </div>
        </div>

    </div>




Aucun commentaire:

Enregistrer un commentaire