javascript - 自定义 mobiscroll 中的动态内容

Question

我在选择的表单中使用 mobiscroll，并且在使用静态内容时没有问题，但是...

现在我正在尝试使用 ajax/json 中的动态内容创建 mobiscroll。

这是我正在尝试做的事情:

$(document).ready(function(){

    $(function(){

        var all_friends = [];

        $.getJSON('http://mypage.com/json/friends.php', function(data){

            $.each(data, function (i, val) {
                all_friends.push("'1':'<div class='friend'><div class='profileimg'><img src='http://mypage.com/"+val.img+"'/></div><span>"+val.name+"</span></div>'");
            });

            var friendlist = {all_friends}; // THIS IS WHAT GIVES ME TROUBLE. I CANT DO THIS? //

            var wheel = [{}];
            wheel[0]['Choose friend'] = friendlist;

            $('#friends').scroller({
                display: 'bottom',
                mode: 'scroller',
                wheels: wheel,
                theme: 'ios',
                animate: 'fade',
                cancelText: 'Regret',
                setText: 'OK',
                height: 40,
                width: 280,
                formatResult: function(data){
                    return data;
                },
                onSelect: function(textValue, inst){
                    var returnData = textValue.toString();
                    var returnData = returnData.split(',');

                    var friend = returnData[0];

                    $('#friends').html(friend);
                }
            });
        });
    });
});

all_friends 数组返回:

'1':'<div class="friend"><div class="profileimg"><img src="http://mypage.com/someimage.png"/></div><span>Friend1</span></div>',
               '2':'<div class="friend"><div class="profileimg"><img src="http://mypage.com/someimage.png"/></div><span>Friend2</span></div>',
               '3':'<div class="friend"><div class="profileimg"><img src="http://mypage.com/someimage.png"/></div><span>Friend3</span></div>' 

我似乎无法获取好友列表中 {} 括号内的数组？这是静态时的样子:

var friendlist = {'1':'<div class="friend"><div class="profileimg"><img src="http://mypage.com/someimage.png"/></div><span>Friend1</span></div>',
               '2':'<div class="friend"><div class="profileimg"><img src="http://mypage.com/someimage.png"/></div><span>Friend2</span></div>',
               '3':'<div class="friend"><div class="profileimg"><img src="http://mypage.com/someimage.png"/></div><span>Friend3</span></div>'}

希望得到帮助并提前致谢:-)

Answer 1

以下代码应该适合您:

var friendlist = {}

$.each(data, function (i, val) {
   $.extend(friendist, {"1":"<div class='friend'><div class='profileimg'><img src='http://mypage.com/"+val.img+"'/></div><span>"+val.name+"</span></div>'"});
});

// here friendlist will be of the format you expect