KnockoutJS从远程源获取JSON,带有映射插件绑定问题

时间:2013-08-07 12:28:37

标签: jquery knockout.js jsonp knockout-mapping-plugin

我有这个jQuery:

$.ajax({url : sUrl,
    dataType: "jsonp",
    type: "GET",
    contentType: "application/json;charset=utf-8",
    headers: { "accept": "application/json;charset=utf-8" },
    error: function (a, b, c){
        alert(a);
        alert(a.status);
        alert(b);
        alert(c);
    },
    success: function (data) {
        alert(data);
        var viewModel = ko.mapping.fromJS(data);
        alert(viewModel);

        /*$.each(data, function (index, element) { 
            alert(index);
            alert(element);
        });*/
    }
});

alert(data);给了我这个:

enter image description here 第二个提醒给了我:

function c(){if(0<arguments.length)return c.equalityComparer&&c.equalityComparer(d,arguments[0])||(c.K(),d=arguments[0],c.J()),this;a.q.bb(c);return d}

.each运行直到索引&gt; 100,所以返回了一个行集。

这是我的一小部分JSON(当我从var sUrl手动点击网址时:

([{    "0":"C551003",
       "id":"57024",
       "1":"0373",
       "number":"373-NIK",
       "2":"1349078013",
       "date_time":"1349078192",
       // etc.
 },{ // next item

我不知道将这个JSON解析为一个漂亮的表是最好的方法。我认为它会在viewmodel中给我一个行数组,我可以这样做:http://knockoutjs.com/documentation/foreach-binding.html 但我不知道映射是否有效以及我如何绑定到例如number prop。

<tbody data-bind="foreach: iHaveNoClue">
    <tr>
        <td data-bind="text: 0"></td>
        <td data-bind="text: id"></td>
        <td data-bind="text: 1"></td>
        <td data-bind="text: number"></td>
        <td data-bind="text: 2"></td>
        <td data-bind="text: date_time"></td>
    </tr>
</tbody>

1 个答案:

答案 0 :(得分:2)

预先注意:因为您拥有名称为数字的属性,所以您必须跳过一些环节才能使text bindingHandler工作。一种方法是将text: 1替换为text: $data['1']


你走在正确的轨道上。 iHaveNoClue可以替换为$root,。e.g:

<tbody data-bind="foreach: $root">

有关示例,请参阅this fiddle。这是有效的,因为viewModel本身将由ko.mapping插件制作成observableArray


替代解决方案
或者,您可以创建一个视图模型,它只包含一个项目可观察数组,其中包含您使用AJAX请求获得的内容。您的视图模型可以像这样构建:

var viewModel = {
    title: ko.observable("My title"),
    items: ko.mapping.fromJS(data)
};

有关该版本的演示,请参阅this fiddle。在此示例中,viewModel是一个简单对象,但您也可以创建一个构造函数来构建更复杂的视图模型。