Knockout Js 的渲染方式与基于 Json 值的 if 数据绑定不同
Knockout Js render differently with if data-bind based on a Json value
我有一个类似于下面的代码,我想用城市名称巴恩斯利以不同的方式呈现首都,用其他名称以不同的方式呈现城市。执行 if 绑定的正确方法是什么?我是否必须将城市名称设置为可观察才能工作?
<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b>
</div>
</li>
</ul>
<script>
ko.applyBindings({
planets: [
{ name: 'Mercury', capital: null },
{ name: 'Earth', capital: { cityName: 'Barnsley' } }
]
});
</script>
好的仍然没有成功我的json是这样的:
var Images = {
"ImageInfo": [
{
"thumbs": [
{
"IMAGE": "url(http://...d38508d4f183.jpg)",
"type": "img"
},
{
"IMAGE": "url(http://...d38508d4f183.jpg)",
"type": "video"
}
]
},
{
"thumbs": [
{
"IMAGE": "url(http://...d38508d4f183.jpg)",
"type": "img"
},
{
"IMAGE": "url(http://...d38508d4f183.jpg)",
"type": "video"
}
]
}
]
};
我想要实现的HTML如下:
<div id="Images">
<div data-bind="foreach: ViewModelB">
<div data-bind="foreach: thumbs">
<div data-bind="if: type == 'img'">
<a style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></a>
</div>
<div data-bind="if: type == 'video'">
<p style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></p>
</div>
</div>
</div>
</div>
<script>
var ViewModelB = ko.mapping.fromJS(Images);
ko.applyBindings(ViewModelB, document.getElementById("Images"));
</script>
任何帮助将不胜感激!
你快到了,如果以后不改变,它不必是可观察的,你可以做 if 语句并以不同的方式呈现,如下所示
<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
<!-- ko if:capital.cityName=='Barnsley' -->
Capital: <b data-bind="text: capital.cityName"> </b>
<!-- /ko -->
<!-- ko if:capital.cityName=='asdad' -->
Capital: <i data-bind="text: capital.cityName"> </b>
<!-- /ko -->
</div>
</li>
</ul>
或者您也可以切换大小写 https://github.com/mbest/knockout-switch-case
不,
它不必是可观察的(只要它之后没有被更改;如果是这样,更改不会自动反映在视图中),并且您几乎正确地得到了建议的绑定:它应该是data-bind="if: cityName=='Barnsley'"
的(注意冒号和引号)。
相关文章:
- 如何从php返回的JSON中检索值
- 如何获取d3.js中json文件中具有特定值的总行数
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 搜索包含值的json对象键,然后取消设置
- 在Javascript中读取没有键值的JSON
- 访问等于 javascript 中特定值的 JSON 属性
- 使用 AngularJS 从没有键值的 JSON 访问数据值
- 获取存储在属性名称中的多个属性值的 JSON 正确语法
- 将具有多个值的 JSON 字符串发布到 ext js 面板
- 如何使用 JavaScript 获取对象索引值的 JSON 响应
- 如何反序列化复选框值的 JSON 数据
- 查找键值的 JSON 路径
- 对具有匹配值的 JSON 键进行排序和合并
- 使用 jquery $.each 解析具有多维数组值的 json
- 如何使用jquery创建每个输入值的JSON
- 查找使用多个字符串值的JSON嵌套节点
- 标签名称attr和值的JSON数组
- 将表单序列化为不带空值的json
- 以字符串形式加载具有特殊值的JSON对象
- 如何使用Jquery从复选框中收集值的JSON对象