javascript - 动态样式 ListView

Question

我正在通过对网络服务的 ajax 调用生成 ListView 。

这是代码:

var ajax = {  
parseJSONP:function(result){  
    movieInfo.result = result.results;
    $.each(result.results, function(i, row) {

        console.log("Title" + row.title);


        $('#movie-list').append('<li><a href="" data-id="' + row.id + '">`<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/>`<h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
    });

    $('#movie-list').listview('refresh');
}

};

我需要的是制作<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/>填充行元素的背景并将行高增加 30%。问题是我想不出一种方法来插入带有 ListView 创建的 css。

有没有办法做到这一点？我是 javascript 和 jQuery Mobile 1.4.3 的新手。

最好的问候

Answer 1

我注意到的几件事:

• 您正在调用 jquery 选择器多次获取 ID 为 movie-list 的元素，因为选择器处于循环中。与其使用 jquery 一遍又一遍地查找相同的元素，不如将其设置为一个变量并重新使用它!

• 您正在使用字符串连接创建 html。虽然这通常适用于少量动态 html，但很快就会变得难以维护。我建议创建 DOM 元素并将它们相互附加(不使用 jquery)，而不是制作一个巨大的 html 字符串。

• 您正在用 javascript 构建 html!如果可能的话，我建议调整您的 API 以返回您需要的 html block 并在服务器端构建它而不是在客户端构建它。如果您构建 html 服务器端，那么您可以利用您正在使用的任何呈现框架(PHP、Jade、JSF 等)并将 html 编写为 html。

考虑到这些，设置 background-image 样式属性应该就可以了。您可能还需要使用 background-repeat 和 background-size 来获得所需的效果。

这是我想出的:

var ajax = {
    parseJSONP:function(response){
        var results = response.results;
        movieInfo.result = results;

        var $movieList = $("#movie-list");

        for(var i = 0; i < results.length; i++) {
            var row = results[i];

            console.log("Title: " + row.title);

            var listItem = document.createElement("li");
            var anchor = document.createElement("a");
            var header = document.createElement("h3");
            var paragraph = document.createElement("p");

            anchor.setAttribute("href", "");
            anchor.setAttribute("data-id", row.id);

            header.textContent = row.title;
            paragraph.textContent = row.vote_average + "/10";

            var backgroundImageUrl = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185" + row.poster_path;
            listItem.style.backgroundImage = "url('" + backgroundImageUrl + "')";
            listItem.style.backgroundRepeat = "no-repeat";
            listItem.style.backgroundSize = "cover";

            anchor.appendChild(header);
            anchor.appendChild(paragraph);
            listItem.appendChild(anchor);

            $movieList.append(listItem);
        }

        $movieList.listview('refresh');

        //increases the height of each list item by thirty percent
        $movieList.find("li").each(function(index, element) {
            var $element = $(element);
            $element.css("height", ($element.offset().height * 1.3) + "px");
        });
    }
};