模态中的淘汰可见绑定

Question

我有一个模式需要根据我的视图模型中的属性是否为真来显示文本。我设置了一个 ajax 调用来确定该信息，但我对淘汰赛不太熟悉，需要一些绑定帮助。

如果属性为真，我需要在“合格”div 中显示所有内容，如果为假，则改为在“不合格”div 中显示所有内容。下面是它的精简部分。

<div class="modal-body" id="orderStatus">

    <div class= "eligible" data-bind="visible: Eligible">
        <p>text</p>
        <div class="modal-footer">
          //button
        </div>
    </div>

    <div class= "ineligible" data-bind="visible: !Eligible">
         <p>text</p>
         <div class="modal-footer">
             //button
         </div>
    </div>

</div>

Answer 1

如果您不想使用@Josh Stevens 提到的内容，您可以简单地在模型中定义另一个变量并通过订阅“Eligible”来设置此变量，那么您仍然可以使用 visible 来显示并为合格和不合格的可观察变量隐藏 DOM。

在你的模型中添加：

 self.Ineligible = ko.observable(false);

 self.Eligible.subscribe(function (value) {
   self.Ineligible(!value);
 });

在你看来改变：

<div class="modal-body" id="orderStatus">

  <div class="eligible" data-bind="visible: Eligible">
    <p>text</p>
    <div class="modal-footer">
      //button
    </div>
  </div>

  <div class="ineligible" data-bind="visible: Ineligible">
    <p>text</p>
    <div class="modal-footer">
      //button
    </div>
  </div>

</div>

编辑： 快捷方式： 只需在您的视图中添加<div class="ineligible" data-bind="visible: Eligible() == 0 ">，这样只要 Eligible 为 false，此比较的结果就会为 true

  <div class="modal-body" id="orderStatus">
      <div class="eligible" data-bind="visible: Eligible">
         <p>text</p>
          <div class="modal-footer">
              //button
          </div>
      </div>
      <div class="ineligible" data-bind="visible: Eligible() == 0 ">
         <p>text</p>
         <div class="modal-footer">
              //button
         </div>
      </div>  
  </div>

Answer 2

您不能将visible binding 用作假子句，它必须为真。为了解决这个问题，我不会使用visible binding，而是将它包装在ko if 中，这是这种情况应该完成的方式。由于每次值更改时淘汰赛都会更新，这将与可见子句相同。

<div class="modal-body" id="orderStatus">
<!-- ko if: Eligible() -->
    <div class= "eligible">
        <p>text</p>
        <div class="modal-footer">
          //button
        </div>
    </div>
<!-- /ko-->
<!-- ko if: !Eligible() -->
    <div class= "ineligible" data-bind="visible: !Eligible">
         <p>text</p>
         <div class="modal-footer">
             //button
         </div>
    </div>
<!-- /ko-->
</div>

如果您担心 DOM 每次都会删除该元素，您可以使用 css binding 并为您的元素添加一个类。

<div class="modal-body" id="orderStatus">
    <div class= "eligible" data-bind="css: { hide: Eligible() }">
        <p>text</p>
        <div class="modal-footer">
          //button
        </div>
    </div> 
    <div class= "ineligible" data-bind="css: { hide: !Eligible() }">
         <p>text</p>
         <div class="modal-footer">
             //button
         </div>
    </div>
</div>

CSS：

.hide { display:none; }

这将像可见绑定一样工作。

Answer 3

我不确定如何编写条件逻辑背后的淘汰赛 在我看来。如果我只是使用 Razor，我会写 @if (Model.IsEligible){...} else{...} 在数据绑定行上

您可以在剃刀视图中使用类似的内容。如果你有一个 @section scripts {} 定义了链接到 HTML 中的 head 部分。您需要设置一个 JS var，以便您可以在要实例化 ko 的 JS 文件中调用它。

<script>
    window.source = @Html.Raw(Json.Encode(Model))
</script

我想这就是你要找的……？

https://jsfiddle.net/24k3dLmb/5/

Answer 4

您拥有的代码是完美的。您现在所需要做的就是将淘汰 ViewModel 的 Eligible observable 设置为您从服务器收到的布尔值。请尝试以下操作：

YourViewModel = function(item) {
    var _self = this;

    _self.Eligible = ko.observable(@Json.Encode(Model.IsEligible));
}

以上是在您的 Eligible 属性仍然可以更改客户端的情况下。如果你不需要这个，你不需要它是一个可观察的，你的代码会变成：

YourViewModel = function(item) {
    var _self = this;

    _self.Eligible = @Json.Encode(Model.IsEligible);
}