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>

我希望代码循环遍历＆lt; response＆gt;的子元素，获取id，将该id与页面中的元素匹配，并使用响应中的元素innerHTML替换页面的元素innerHTML。它似乎并不那么难，但我似乎无法让这个工作。任何帮助将非常感激。感谢。

Answer 1

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>"},
        ....  
       ]  
}

您可以使用一些快捷方式，但这显示了逻辑。

Answer 2

你可以像这样从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并使其不可用。

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

2 个答案: