[英]Containerless if binding not working in KnockoutJS
I recently wanted to show a specific property if it is defined, and if it is not defined I want to show a DIV element with some instructions on it. 我最近想显示一个特定的属性(如果已定义),如果未定义,我想显示一个DIV元素并带有一些说明。
But i couldn't figure that out; 但是我无法弄清楚; I've tried with
$root
or even the bind property with it but without success. 我已经尝试过使用
$root
甚至它的bind属性,但是没有成功。
Here is a sample of my code: 这是我的代码示例:
function InvestigatorInfo() {
var self = this;
self.Name = ko.observable();
self.Description = ko.observable();
self.TypeName = ko.observable();
self.AssemblyName = ko.observable();
self.ResultType = ko.observable();
self.EnumTypeName = ko.observable();
self.Obsolete = ko.observable();
self.InvestigatorType = ko.observable();
self.Properties = ko.observable();
self.Requires = ko.observable();
}
InvestigatorInfo.prototype.fromJS = function(data) {
var self = this;
self.Name(data.Name || "");
self.Description(data.Description || "");
self.TypeName(data.TypeName || "");
self.AssemblyName(data.AssemblyName || "");
self.ResultType(data.ResultType || "");
self.EnumTypeName(data.EnumTypeName || "");
self.Obsolete(data.Obsolete || "");
self.InvestigatorType(data.InvestigatorType || "");
self.Properties(data.Properties.Properties || []);
self.Requires(data.Requires.Interfaces || []);
}
And my index: 我的索引:
<ul class="collapsible" data-collapsible="accordion" data-bind="foreach:InvestigatorInfos">
<li>
<div class="collapsible-header">
<i class="material-icons">view_quilt</i>
<p class="blue-text" data-bind="text: TypeName"></p>
</div>
<div class="collapsible-body">
<p class="style_p_row" ><b>AssemblyName:</b> <span data-bind="text: AssemblyName"></span></p>
<!-- ko if:Description -->
<p class="style_p_row" ><b>Description:</b> <span data-bind="text: Description"></span></p>
<!-- /ko -->
<!-- ko if:EnumTypeName -->
<p class="style_p_row" >
<b>EnumTypeName: </b><span data-bind="text: EnumTypeName"></span></p>
<!-- /ko -->
<p class="style_p_row" >
<b>InvestigatorType:</b> <span class="investigatortype-class" data-bind="text:investigatorName[InvestigatorType]"></span></p>
<p class="style_p_row" ><b>Name: </b><span data-bind="text: Name"></span></p>
<!-- ko if:Obsolete -->
<p class="style_p_row" ><b>Obsolete: </b><span data-bind="text: Obsolete"></span></p>
<!-- /ko -->
<p class="style_p_row" ><b>TypeName: </b><span data-bind="text: TypeName"></span></p>
<!-- ko if:ResultType -->
<p class="style_p_row" ><b>ResultType: </b><span data-bind="text: resultName[ResultType]"></span></p>
<!-- /ko -->
<!-- ko ifnot:Properties-->
<p class="blue-text padding_p">Properties</p>
nothing is set
<!-- /ko -->
<!-- ko if: Properties-->
<table class="bordered">
<thead>
<tr>
<th data-field="Name">Name</th>
<th data-field="Converter">Converter</th>
<th data-field="ValidationName">ValidationName</th>
<th data-field="EnumTypeName">EnumTypeName</th>
</tr>
</thead>
<tbody data-bind="foreach: Properties">
<tr>
<td><span data-bind="text: Name"></span>
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
</div>
</li>
</ul>
The Properties
section within ko if: Properties
always shows up, even if there are no values in the array behind it, rather than the elements defined within ko ifnot: Properties
. ko if: Properties
的Properties
部分ko if: Properties
始终显示,即使其后面的数组中没有值,也不会显示ko ifnot: Properties
定义的元素ko ifnot: Properties
。
JSON data: JSON数据:
{
"BrickInfos": {
"BrickInfos": [
{
"Properties": {
"Properties": [
]
},
"Implements": {
"Interfaces": [
{
"TypeName": "ITSR2.Bricks.Access.IAccessBareBoneBrick"
},
{
"TypeName": "ITSR2.Bricks.Access.IAccessAppBrick"
}
]
},
"Name": "AccessBareBoneApp",
"Description": "",
"TypeName": "ITSR2.Bricks.Access.AccessBareBoneApp",
"AssemblyName": "ITSR2.Bricks.MSOffice, Version=3.0.0.0, Culture=neutral, PublicKeyToken=null",
"Obsolete": false
},
{
"Properties": {
"Properties": [
{
"Name": "MainFile",
"Description": "",
"ValidationType": 4,
"Converter": 8,
"EnumTypeName": ""
}
]
},
"Implements": {
"Interfaces": [
{
"TypeName": "ITSR2.Bricks.Access.IAccessBrick"
},
{
"TypeName": "ITSR2.Bricks.Access.IAccessAppBrick"
}
]
},
"Name": "AccessFile",
"Description": "",
"TypeName": "ITSR2.Bricks.Access.AccessFile",
"AssemblyName": "ITSR2.Bricks.MSOffice, Version=3.0.0.0, Culture=neutral, PublicKeyToken=null",
"Obsolete": false
},
]
}
}
Your Properties
property is an observable
which looks like it holds an array, and is either set to data.Properties.Properties
or an empty array ( []
). 您的
Properties
属性是一个observable
,看起来像它持有一个数组,并且设置为data.Properties.Properties
或一个空数组( []
)。
[]
is a "truthy" value , so even if the code has assigned []
to Properties
, the knockout if
binding will see it as being populated. []
是一个“真实的”值 ,因此即使代码已将[]
分配给Properties
, if
绑定的敲除操作也会将其视为已填充。 You need to check the length of it: 您需要检查它的长度:
<!-- ko if:Properties().length == 0-->
Note the ()
- we need to call the observable to get the underlying array - the observable itself doesn't have a length
property. 注意
()
-我们需要调用observable以获得基础数组-observable本身没有length
属性。
Regarding your update, taking Obsolete
as another example, you're passing it false
. 关于更新,以
Obsolete
为例,您将其传递为false
。 This means that: 这意味着:
<!-- ko if: Obsolete -->
Is never going to show it's contents, as it's clearly false
. 永远不会显示它的内容,因为它显然是
false
。 You need to tailor it to the values you're expecting - since you're setting the default value to ""
, you could check for that: 您需要将其调整为所需的值-由于您将默认值设置为
""
,因此可以检查以下内容:
<!-- ko ifnot: Obsolete() === "" -->
So if it's specifically a blank string, it won't display, anything else will be displayed. 因此,如果它具体是一个空白字符串,则不会显示,其他任何内容都会显示。 Each of your properties will need to have a similar check depending on what you're passing to them and whether any "valid" values that you want to display could end up being treated as falsy values.
您的每个属性都需要进行类似的检查,具体取决于您要传递给它们的内容以及要显示的任何“有效”值是否最终会被视为虚假值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.