Условный шаблон на Polymer 1.0

У меня возникли проблемы с применением нового условного шаблона, в частности, с самим условием, я думаю.

У меня есть что-то вроде этого:

<template is="dom-repeat" items="{{menuitems}}" as="poscol">
    <template is="dom-if" if="{{index != 4}}">
        <div class="positioncolum horizontal layout center wrap flex">
            <span>{{index}}</span>
            <template is="dom-repeat" items="{{poscol}}" as="mitem" >
               <main-menu-item mitem="{{mitem}}"
                   order="{{mitem.TotalOrder}}"
                   onclick="clickMainMenuMod(index)">
               </main-menu-item>
            </template>
       </div>
   </template>
</template>

Теперь, если я прокомментирую бит <template is="dom-if" if="{{index != 4}}">, он работает нормально, индекс отображается так, как должен. В четвертом массиве хранятся модули, которые пользователь выбрал как невидимые, поэтому они не должны отображаться в главном меню.

Я предполагаю, что что-то не так с условием if, но я не могу понять, что.

Спасибо!


polymer polymer-1.0
person Iskalla    schedule 10.06.2015    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Попробуйте изменить свой условный шаблон следующим образом:

<template is="dom-if" if="{{show(index)}}">

И добавьте эту функцию в скрипт Polymer:

show: function (index) {
    return index != 4;
}
person vasek    schedule 10.06.2015
comment
Я предполагаю, что не могу сделать это вне полимерного элемента - person Iskalla; 10.06.2015
comment
Я пробовал это, но поскольку мой шаблон находится не в пользовательском элементе, а на странице индекса, я не знаю, как это сделать... - person Iskalla; 10.06.2015
comment
@Iskalla Тогда создайте собственный элемент. Немного вдохновения: jsbin.com/zovolineke/1/edit?html,output - person vasek; 10.06.2015
comment
Я пытался не создавать пользовательский элемент для чего-то, что я использую только один раз в своем приложении, но похоже, что это единственный выход. Спасибо :) - person Iskalla; 10.06.2015
comment
Вам не нужно создавать полный настраиваемый элемент, но если вы хотите использовать синтаксис привязки (то есть {{ }}), вам нужно как минимум использовать шаблон dom-bind (polymer-project.org/1.0/docs/devguide/templates.html#dom-bind ). - person Scott Miles; 12.06.2015
comment
Кроме того, вместо использования if="{{...}}" вы можете написать javascript, чтобы установить свойство if шаблона, когда вам угодно. - person Scott Miles; 12.06.2015