javascript - 如果数据为空，则显示错误并 knockout

Question

我对 Knockout.js 还很陌生

我正在我的 mvc View 中显示数据库中的一些数据。目前，由于数据始终存在，因此工作正常。但我想编写一个代码，如果数据为空(例如没有购买的书籍)，它会显示错误/警告，并且我可以提供一个购买带有此错误的新书的链接。

这就是我现在显示数据的方式

var purchasedBooks = @Html.Raw(Json.Encode(Model.Data));
            ko.applyBindings(new BookViewModel(purchasedBooks == null ? //doSomething : purchasedBooks));

有什么帮助吗？我想在 div 内显示错误，并提供购买新书的链接。但只想在没有书籍的情况下显示此 div。

<div class="book-p" data-bind="">
    <a href="#">Purchase new book!</a>
</div>

Answer 1

这里有一些简单的 knockout ，它维护项目的计数，并根据计数是 0 或大于 0 显示不同的消息。运行以下代码片段来测试此解决方案。

var viewModel = {  
  bookCount: ko.observable(0),
  addBook: function() {
    this.bookCount(this.bookCount() + 1)
  },
  removeBook: function() {
    if(this.bookCount() > 0)
      this.bookCount(this.bookCount() - 1)
  },
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js">
</script>

<h2>Books:</h2>

<div data-bind="if: bookCount() > 0">
  <span data-bind="text: 'books in basket: ' + bookCount()"></span>
</div>

<div data-bind="if: bookCount() === 0">
  <span>no books in basket</span><br />
  <a href="#">Go here to buy some books</a>
</div>

<input type="button" value="add" 
       data-bind="click: addBook" />
<input type="button" value="remove" 
       data-bind="click: removeBook, visible: bookCount() > 0" />