如果綁定在KnockoutJS中不起作用，則為無容器

Question

我最近想顯示一個特定的屬性（如果已定義），如果未定義，我想顯示一個DIV元素並帶有一些說明。

但是我無法弄清楚； 我已經嘗試過使用$root甚至它的bind屬性，但是沒有成功。

這是我的代碼示例：

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 || []);
}

我的索引：

<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>

ko if: Properties的Properties部分ko if: Properties始終顯示，即使其后面的數組中沒有值，也不會顯示ko ifnot: Properties定義的元素ko ifnot: Properties 。

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
                                          },
                                     ]
                    }
}  

Answer 1

您的Properties屬性是一個observable ，看起來像它持有一個數組，並且設置為data.Properties.Properties或一個空數組（ [] ）。

[]是一個“真實的”值 ，因此即使代碼已將[]分配給Properties ， if綁定的敲除操作也會將其視為已填充。 您需要檢查它的長度：

<!-- ko if:Properties().length == 0-->

注意() -我們需要調用observable以獲得基礎數組-observable本身沒有length屬性。

關於更新，以Obsolete為例，您將其傳遞為false 。 這意味着：

<!-- ko if: Obsolete -->

永遠不會顯示它的內容，因為它顯然是false 。 您需要將其調整為所需的值-由於您將默認值設置為"" ，因此可以檢查以下內容：

<!-- ko ifnot: Obsolete() === "" -->

因此，如果它具體是一個空白字符串，則不會顯示，其他任何內容都會顯示。 您的每個屬性都需要進行類似的檢查，具體取決於您要傳遞給它們的內容以及要顯示的任何“有效”值是否最終會被視為虛假值。