如何更新 MooTools Request.HTML 调用中的多个元素

Question

使用 MooTools Request.HTML，我的 Request 调用工作完美，通过使用以下内容更新我的页面元素：

onComplete: function() {
    var response = this.response.text;
    $('content').set("html", response); 
}

但是，我希望能够有一个响应，其中包含由 ID 更新的多个元素，但我不能我的生活让它正常工作。例如，如果我的响应是：

<response>
    <div id="header"><h1>My Title</h1></div>
    <div id="content"><h2>Content</h2><p>This is my content</p></div>
    <div id="footer"><p>Special footer for this page</p></div>
</response>

我希望代码循环遍历的子元素，获取 id，将该 id 与页面中的元素相匹配，然后将页面的元素 insideHTML 替换为该元素来自响应的innerHTML。这似乎并不难，但我似乎无法让它发挥作用。任何帮助将不胜感激。谢谢。

Answer 1

您可以像这样遍历 Request.HTML 返回的元素：

http://jsfiddle.net/dimitar/NF2jz /1139/

new Request.HTML({
    url: '/echo/html/',
    data: {
        html: data,
        delay: 1
    },
    method: 'post',
    onComplete: function() {
        // first, only get elements that have an id and are divs
        // this may be slow as it looks for ALL els returned, depends on your
        // fragment 
        var filtered = this.response.elements.filter(function(el) {
            return el.get("id") && el.get("tag") == "div";
        });

        // This wil be even faster, working with your response fragment 
        // where your els are children of the first node:
        // get div els where id is set via Slick
        var filtered = this.response.tree[0].getElements("div[id]");

        filtered.each(function(el) {
            // get the id
            var id = el.get("id");
            // remove the id from the element so dom selector works correctly
            el.set("id", null);

            // look for dom element that matches
            var target = document.id(id);

            // if found, update html
            if (target)
                target.set("html", el.get("html"));

        });
    }
}).send();

正如 mootools-core 的 Tim Weink 喜欢指出的那样，我有一个讨厌的习惯，即使用公共 API 之外的未记录的 mootools 功能，例如访问 this.response直接在我应该使用命名参数的地方。记住这一点并查看文档，了解哪个参数将与 this.response.elements 或 this.response.tree 匹配 - 在不可能中mootools 更改其 API 并使其不可用的事件。

Answer 2

onSuccess:function(responseJSON, responseText)
{
    var data_length = responseJSON.data.length;
    for(var i=0;i<data_length;i++){
         $(responseJSON.data[i].id).set('html',responseJSON.data[i].html);
    }
}

来自服务器的 JSON 响应

{data: [
        {id:"header",html:"<h1>My title</h1>"},
        {id:"content",html:"<h2>Content</h2><p>This is my content</p>"},
        ....  
       ]  
}

您可以执行一些捷径，但这显示了逻辑。