2014-07-26 1 views
1

Я пытаюсь создать элемент полимера, который аутентифицирует пользователей на форуме SMF. Я хочу, чтобы элемент отображал свойство «user», изначально представляющее собой пустой объект {}, но если/когда элемент выполнил ajax-запрос и сможет аутентифицировать пользователя, этот объект будет содержать сведения о пользователе (и аутентификацию токен) для использования в остальной части приложения. Остальная часть приложения находится в разделе содержимого элемента и будет отображаться только тогда, когда произошла ошибка.Смутно о различии между отражением атрибута Polymer и двухсторонней привязкой данных

Таким образом, применение структурирована как этот

<smf-auth login="login/url", fail="fail/url", splash="initial/splash/img" user> 
rest of application which will need access to user 
</smf-auth> 

я опубликовал пользователь с отражающими свойствами, и установить его начальное значение {}. Однако, когда я запускаю модульные тесты, я запускаю javascript, чтобы получить элемент (как переменную javascript) и посмотреть на el.user, и он имеет значение «» (т. Е. Пустую строку). Я попытался изменить код, чтобы инициализировать пользователя как нечто более сложное, но я все равно получаю пустую строку.

Вот определение элемента (с моим более сложным пользователем)

<polymer-element name="smf-auth" attributes="login fail splash"> 
    <template> 
    <core-ajax id="req" url="{{login}}" handleAs="json" on-core-response="{{handleResponse}}"></core-ajax> 
    <img id="splash" src="{{splash}}"/> 
    <template if="{{autheticated}}"> 
     <content></content> 
    </template> 

    </template> 

    <script> 
    Polymer('smf-auth',{ 
    publish:{ 
     user:{ 
     value:{token:{},uid:0,name:''}, 
     reflect:true 
     } 
    }, 
    created:function(){ 
     this.authenticated = false; 
    }, 
    attached:function(){ 
     this.$.req.go(); 
    }, 
    handleResponse:function(response){ 
     //TODO decide what the response is 
    } 
    }); 
    </script> 
</polymer-element> 

Так как я должен объявить и использовать свойство «пользователя», так что содержание элемента (более полимерных элементов) имеет доступ к it

ответ

4

Необходимо указать привязку данных к пользовательскому свойству при создании экземпляра smf-auth. Тогда вы можете получить доступ к этому свойству в теле элемента:

<smf-auth user="{{user}}" ...> 
    Hello {{user.name}}! 
</smf-auth> 

Это предполагает, что ваш SMF-Auth элемента сам находятся внутри элемента Polymer. В противном случае вам понадобится auto-binding template element.

Если иерархия элементов глубокая и вам нужно пользователя объект в элементе в нижней части, это может быть проблемой, чтобы передать пользователя свойство вниз по иерархии. В этом случае другой вариант может заключаться в использовании core-signals и отправке события, когда пользователь выполнил вход. Внутренние элементы могут прослушивать это событие и извлекать объект из сведений о мероприятии.

+0

Как я вижу это в настоящий момент (хотя это может измениться) smf-auth - это самый верхний полимерный элемент, но первым ребенком будет другой полимерный элемент '', который затем будет использовать основные страницы для управления остальной частью приложения для аутентифицированных пользователей. – akc42

+0

Хотя '' находится на верхнем уровне, просто добавление скобок в соответствии с этим примером предоставляет свойство javascript. поэтому я могу сделать что-то вроде 'var el = document.querySelector ('smf-auth'); var user = el.user; 'в моем модульном тестовом скрипте для доступа к объекту пользователя и проверить его ожидаемое значение. – akc42