Question

我在/ api / pin处有一个api端点，它返回以下JSON：

{
  "num_results": 4,
  "objects": [
    {
      "id": 1,
      "image": "http://placekitten.com/200/200/?image=9",
      "title": "Test"
    },
    {
      "id": 2,
      "image": "http://placekitten.com/200/200/?image=9",
      "title": "test"
    },
    {
      "id": 3,
      "image": "www.test.com",
      "title": "test"
    }
  ],
  "page": 1,
  "total_pages": 1
}

我想将它映射到一个可淘汰的可观察数组并将其显示在我的页面中。这是我的js文件：

define(['knockout', 'text!./pins.html'], function(ko, templateMarkup) {

function Pins(params) {
    var self = this;
    self.agents  = ko.observableArray([]);

    $.getJSON('/api/pin', function(data){
        self.agents = ko.mapping.fromJS(data);
    });
 }


return { viewModel: Pins, template: templateMarkup };

});

我的HTML：

<b data-bind="agents.num_results"> results </b>
<table>
    <tbody data-bind="foreach: agents.objects">
        <tr>
            <td data-bind="text: image"></td>
            <td data-bind="text: title"></td>
        </tr>     
    </tbody>
</table>

我没有得到任何渲染，除了＆＃34;结果＆＃34;。

我知道我可以创建一个代表JSON数据的视图模型，并在getJSON期间将其推送到数组中（我已成功完成）。但我认为淘汰映射库的重点在于你没有必要这样做。我想我无法绕过我在这里做错的事情。似乎我必须遗漏一些非常明显的东西，但是我想把头发拉出来试图弄清楚什么是错的。

Answer 1

所以我明白了。基本上我不得不像这样模拟一个PinViewModel：

define(['knockout', 'text!./pins.html'], function(ko, templateMarkup) {

    function PinVewModel (){
      this.objects = ko.observableArray();
    }

    function Pins(params) {
        var self = this;
        self.agents   = new PinVewModel();

        $.getJSON('/api/pin', function(data){
            ko.mapping.fromJS(data, {}, self.agents);
        });
     }

   return { viewModel: Pins, template: templateMarkup };

   });

如果有人对POST部分感兴趣......

  function Pin(data){
    this.image = ko.observable(data.image);
    this.title = ko.observable(data.title);
  }

  this.createPins = function(formElement){
     formPin = new Pin({image: formElement.pin_url.value, title: formElement.pin_name.value});

    $.ajax("/api/pin", {
        data: ko.toJSON(formPin),
        type: "post", contentType: "application/json",
        success: function(result) { 
            self.pins.objects.push(formPin);
        }
    });     
};

我在这里做的可能是冗余，但它可以工作并达到预期的效果。

淘汰赛映射 - JSON数据

1 个答案: