使用 Knockout.js将插件与 json 中的数组映射
Using Knockout.js mapping plugin with an array in json
我正在尝试设置一个示例,其中一系列新闻项将使用 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 调用的示例。
相关文章:
- 无法通过数组映射绑定
- React Native数组映射与多维数组
- 在JavaScript中搜索数组映射的最有效方法
- Undercore将对象的数组映射到以id为键的新对象
- 将一个外部二维数组映射到另一个二维数组(javascript)
- 如何将一个javascript数组映射到另一个具有不同字段名称的数组
- 数组映射和筛选顺序
- 如何使用 JavaScript 将此数组映射到新格式
- 使用 lodash 是将数据从数组映射到单个数组的好方法
- 将 json 数组中的数组映射到 Angularjs 范围
- 如何使用哈希图或数组映射返回总数最高的类别
- 当某些数据是可选的时,使用数组映射
- JavaScript 将数组映射到对象属性
- 角度中的数组映射错误
- 将数组映射变量替换为实际的变量名称/字符串
- 在用数组填充初始化的数组上使用数组映射的意外行为
- JavaScript 数组映射函数不会更改字符串中的元素
- 将 JSON 数组映射到 KO 抛出错误
- javascript 数组映射与应用
- 从 JQuery 中的字符串创建数组映射