domReady против готов - Переход к полимеру 1.0

В Polymer0.5, я имел следующий код:domReady против готов - Переход к полимеру 1.0

Шаблон:

<div class="scroll"> 
    <div class="content"> 
     <content></content> 
    </div> 
</div>

Сценарий:

domReady: function() { 
    var width = $(this.shadowRoot).find('.content')[0].scrollWidth; 
}

Этот код работает, и я получил ненулевое значение для ширины.

Теперь я пытаюсь перейти на Polymer1.0, я добавил ID в DIV:

<div class="scroll"> 
    <div id="content" class="content"> 
     <content></content> 
    </div> 
</div>

И сценарий теперь:

ready: function() { 
    var width = this.$.content.scrollWidth; 
}

Однако, эта ширина есть 0.

Есть ли разница между старой domReady функции, а новая функция ready? Я также пробовал использовать функцию attached, но это тоже не сработало.

Когда я пытаюсь получить доступ к width позже (с нажатием кнопки), тогда я получаю ненулевое значение, которое я ищу.

Элемент используется следующим образом:

<my-scrollbar> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus leo, sagittis lobortis velit vel, viverra vulputate purus. Proin lacinia magna eu erat iaculis, eget mollis lectus mattis. 
</my-scrollbar>

Так что внутренний текст, что определяет размеры элемента.

источник

2015-06-02 Tyler

'this. $. 'автоматический поиск узлов работает только с идентификаторами, а не с классами. Это опечатка в шаблоне? – Zikes

Извините, я добавил 'ID' к этому элементу, потому что я не был уверен, были ли классы проблемой. Я отредактирую это. – Tyler

Поскольку 'this. $. Content' уже ссылается на узел, вы должны уйти с этим. $. Content.scrollWidth'. Я не думаю, что это решит вашу проблему, но может сэкономить вам некоторое написание в будущем. – Zikes

Оказалось, что мой оригинальный код работал в Safari, но не в Chrome.

С предложением Zikes, я добавил в некоторый асинхронный режим, и теперь он работает в обоих браузерах.

Окончательный ответ:

attached: function() { 
    this.async(function(){ 
     var width = this.$.content.scrollWidth; 
    },1) 
}

источник

2015-06-02 22:34:42 Tyler

Рад, что сработало! Обязательно «принимайте» этот ответ, так как он решает проблему. – Zikes

Yepp, не может, кроме моего собственного решения, на несколько дней. – Tyler

Альтернативой является "слив" DOM перед началом работы с ним. В этом случае код будет:

attached: function() { 
    var width; 
    Polymer.dom.flush(); 
    width = this.$.content.scrollWidth; 
},

Поскольку это синхронный, декларативной, и не включает в себя закрытие, это может быть легче работать.

Дополнительная информация: https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api

источник

2015-06-03 01:31:00 Zikes

domReady против готов - Переход к полимеру 1.0

ответ

Смежные вопросы