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

Using Knockout.js mapping plugin with an array in json

本文关键字:数组 映射 json Knockout js 插件 使用      更新时间:2023-09-26

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

这是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": {}
      }
    }
  ]
}

此时,我只是想让它工作以显示模板中的数据。任何见解将不胜感激。提前谢谢。

那么,所需的修改可以从数据端或客户端进行。从表面上看,由于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>  
    

修改了对数据结构的更改。我还包括了一种替代方法,该方法将fromJS调用直接映射为视图模型。


在小提琴中模拟 json 调用的示例。