Knockout 无法处理绑定 With、options 等

Question

我有一个带有侧边栏/侧边菜单的单页应用程序

function MyApp() {
  this.Menus = ko.observableArray();
  this.paginatedRecordList = ko.observableArray();

  this.Menus.push({
    Selected: true,
    IconClass: 'fa-dashboard',
    Title: "Dashboard",
    Route: "#dashboard",
    MenuItems: []
  }, {
    Selected: false,
    IconClass: 'fa-laptop',
    Title: "Item Management",
    Route: null,
    MenuItems: [{
        Title: 'Product',
        IconClass: 'fa-shopping-cart',
        Selected: ko.observable(false),
        Route: '#product'
      },
      {
        Title: 'Product Category',
        IconClass: 'fa-list-ol',
        Selected: ko.observable(false),
        Route: '#product-category'
      },
      {
        Title: 'Product Subcategory',
        IconClass: 'fa-list-ul',
        Selected: ko.observable(false),
        Route: '#product-subcategory'
      }
    ]
  }, {
    Selected: false,
    IconClass: 'fa-truck',
    Title: "Supplier",
    Route: "#supplier",
    MenuItems: []
  }, {
    Selected: false,
    IconClass: 'fa-users',
    Title: "Customer",
    Route: "#customer",
    MenuItems: []
  }, {
    Selected: false,
    IconClass: 'fa-database',
    Title: "Inventory",
    Route: null,
    MenuItems: [{
        Title: 'Stock In',
        IconClass: 'fa-download',
        Selected: ko.observable(false),
        Route: '#stock-in'
      },
      {
        Title: 'Stock Adjustment',
        IconClass: 'fa-upload',
        Selected: ko.observable(false),
        Route: '#stock-adjustment'
      },
      {
        Title: 'Delivery Receipt',
        IconClass: 'fa-clipboard',
        Selected: ko.observable(false),
        Route: '#delivery-receipt'
      }
    ]
  });
}

ko.applyBindings(new MyApp());

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<table>
  <tbody data-bind="foreach: paginatedRecordList">
    <tr role="row">
      <td class="visible-lg">
        <p data-bind="text: Code"></p>
      </td>
      <td>
        <p data-bind="text: Name"></p>
      </td>
      <td class="visible-lg">
        <p data-bind="text: PaymentTermIdName"></p>
      </td>
      <td>
        <p data-bind="text: MobilePhone"></p>
      </td>
      <td class="visible-md visible-lg">
        <p data-bind="text: MainPhone"></p>
      </td>
      <td class="col-md-3 col-lg-2">
        <p data-bind="text: ContactPerson"></p>
      </td>
      <td class="col-md-2 visible-lg">
        <p data-bind="text: moment(ModifiedOn).format('DD-MMM-YYYY h:mm A')"></p>
      </td>
      <td class="col-sm-1 col-xs-2">
        <div class="row pull-right">
          <a href="#" title="edit record" class="click-edit" data-bind="click: ClickEdit">
            <p class="fa fa-edit col-sm-3"></p>
          </a>
          <a href="#" title="delete record" class="click-delete" data-bind="click: ClickDelete">
            <p class="fa fa-trash-o col-sm-3"></p>
          </a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

错误提示

ReferenceError: Unable to process binding "foreach: function(){return paginatedRecordList }"
Message: Unable to process binding "text: function(){return Code }"
Message: Code is not defined

每次我导航到 Stock In 然后点击访问另一个菜单时都会出现一些错误ReferenceError: Uable to process binding .....

希望有人可以帮助我，如果您需要更多信息，请询问。

Answer 1

我会说这个错误非常不言自明。

Message: Code is not defined

只是反映您的示例数据条目中没有定义属性代码

{
    Selected: false,
    IconClass: 'fa-truck',
    Title: "Supplier",
    Route: "#supplier",
    MenuItems: []
 }

所以问题来了，为什么您甚至期望一个您从未提供过的属性代码。

如果您希望某些结果有代码，而某些结果未定义，我总是使用三元运算符

data-bind="text: Code ? Code : 'No Code' "