Question

我正在尝试设置一个示例，其中将使用json格式的ajax传递一系列新闻项。目前我只是使用一个函数来模拟返回的数据。

这是jsfiddle：http://jsfiddle.net/c8b4naL5/

           <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

                  <span data-bind="foreach: { data: newsItems, as: 'item' }" > 
                    <!-- <span data-bind="foreach: { data: items, as: 'item' }"> -->
                    <div class="news-item">
                       <span data-bind='text:item.title'></span>
                     </div>

                  </span>   
 <script type="text/javascript">
   function NewsItemsCall(){
        return {
            newsItemsFromCall: [
                {title:'First Title From call'},
                {title:'Second Title From call'}
            ]
        }
    }

    function NewsItem(newsItemsCall){
        var map = ko.mapping.fromJS(newsItemsCall);
        return map;
    }




    var viewModel = {
       newsItems:ko.observableArray([new NewsItem(new NewsItemsCall())])
    }


           ko.applyBindings(viewModel);
</script>

ko.toJSON显示以下内容：

{
  "newsItems": [
    {
      "newsItemsFromCall": [
        {
          "title": "First Title From call"
        },
        {
          "title": "Second Title From call"
        }
      ],
      "__ko_mapping__": {
        "ignore": [],
        "include": [
          "_destroy"
        ],
        "copy": [],
        "observe": [],
        "mappedProperties": {
          "newsItemsFromCall[0].title": true,
          "newsItemsFromCall[1].title": true,
          "newsItemsFromCall": true
        },
        "copiedProperties": {}
      }
    }
  ]
}

此时我只是试图让它在模板中显示数据。任何见解将不胜感激。提前谢谢。

Answer 1

可以从数据端或客户端接近所需的修改。从表面看，由于newsItems包含newItemsFromCall数组，因此您的观点与数据不匹配。如果数据格式正确，则只需添加另一个foreach绑定。

修改数据
- NewsItemsCall可以返回数组而不是对象
- 请注意mapping来电的回复，具体取决于您在其他地方使用该值的方式

修改用户界面

<span data-bind="foreach: { data: newsItems, as: 'item' }" > 

  <div data-bind='foreach: item.newsItemsFromCall'>
    <span data-bind='text: title'></span>
  </div>

</span>

Modified fiddle更改了数据结构。我还提供了一种替代方法，可以将fromJS调用直接映射为视图模型。

小提琴中mocking json calls的例子。

使用Knockout.js映射插件和json中的数组

1 个答案: