MooTools использует grab/inject для добавления дочерних элементов
Как добавить новый элемент в другой? Код ниже использует примеры на сайте библиотеки, но ничего не отображается. Я проверил содержащий элемент с помощью.innerHTML, который делает рендеринг. Что я делаю неправильно?
var Article = new Class({
initialize: function(order, title, body){
this.order = order;
this.title = title;
this.body = body;
}
});
window.addEvent("domready", function() {
var Content = new Hash();
Content.set("dbitem15", new Article(1, "title1", "content1"));
Content.set("dbitem33", new Article(2, "title2", "content2"));
Hash.each(Content, function(value, key){
var article_title = new Element("div", {id: "title" + key});
article_title.set("class", "article_title");
article_title.innerHTML = value.title;
var article_content = new Element("div", {id: "content" + key});
article_content.set("class", "article_content");
article_content.innerHTML = value.body;
var article = new Element("div", {id: key});
article.set("class", "article");
article.inject(article_title, "after");
article.inject(article_content, "after");
//article.grab(article_title, "after");
//article.grab(article_content, "after");
//article.innerHTML = key;
$("plan").grab(article,"after");
});
});
2 ответа
Вот некоторый (переработанный) код, который работает: http://jsfiddle.net/mqchen/kJqLf/1/
Основное отличие заключается в следующем:
article.grab(article_title, "bottom");
article.grab(article_content, "bottom");
Проблема заключалась в том, что вы использовали inject(..., after)
это означает, что вы добавили созданные элементы (заголовок, содержимое) после элемента article, а это означает, что при последующем помещении элемента article в элемент "plan" элементы title и content не были добавлены (они находятся где-то в пустом месте). вакуум космоса). Вам нужно поместить элементы title и content в элемент article, используя grab(..., bottom)
,
Предполагая, что я не читаю код неправильно, вы пытаетесь вставить article_title
а также article_content
в article
, да?:
article.inject(article_title, "after");
article.inject(article_content, "after");
В этом случае вы переключили элементы вокруг. .inject()
ссылается на элемент, который нужно вставить, и первый параметр предназначен для элемента контейнера.
Так что постарайтесь:
article_title.inject(article, "after");
article_content.inject(article, "after");