Как правильно кешировать DOM-элемент в jquery?

Question

У меня возникли проблемы с доступом к кэшированному элементу DOM из переменной пространства имен. Моя переменная конфигурации FeedManager выглядит так:

var FeedManager = {
    config : {
        $feedContainer : $('#feedContainer'),
        feedUrl : 'http://rss......',
        feedLimit : 10
    },....  

Здесь $ feedContainer - это элемент ul в html. Я хотел добавить элементы li, созданные из канала. У меня есть funciton init () внутри объекта FeedManager. Но как-то не может добавить дочерний элемент.

    init: function(){
          var feed = new google.feeds.Feed(FeedManager.config.feedUrl);
              ......
              ......
              // this is not working 
              FeedManager.config.$feedContainer.append(li);

но если внутри функции init () я снова получаю элемент feedContainer, он работает!

 var feedContainer = $('#feedContainer');
 feedContainer.append(li);

В чем может быть проблема? и как я могу использовать кэшированный элемент dom, инициализированный в моем объекте конфигурации.

Answer 1

Вы должны убедиться, что $('#feedContainer') уже загружен.

Аналогичный пример:

<script type="text/javascript">
$(function() {
var Manager = {
    config: {
        $p: $("p#hello")
    },
    init: function() {
        var label = Manager.config.$p.html();
        console.log(label);
    }
};
Manager.init();
});
</script>

Answer 2

Ваш элемент #feedContainer присутствует в вашем HTML или он загружается позже? Если он получен позже, чем вы не можете кэшировать элемент, вам придется использовать только строку выбора, например feedContainer: '# feedContainer'`

в вашем объекте FeedManager и затем используйте что-то вроде

$(FeedManager.config.feedContainer).append(li);

Если он присутствует в HTML, убедитесь, что вы определили свой объект FeedManager после того, как DOM готов, т.е. внутри

$(document).ready(function () {
    // ...
});

или $(function () { ... });