Question

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

如果属性为true，我需要显示“合格”div中的所有内容，如果属性为false，则显示“不合格”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”设置此变量，那么您仍然可以按顺序使用可见显示和隐藏符合条件和不合格的可观察变量的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，此比较结果就为真

  <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中，这是应该这样做的方式。每次更改值时，敲除更新将与visible子句相同。

<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）{...}数据绑定行上的其他{...}

你可以在剃刀视图中使用这样的东西。如果您定义了@section脚本{}，则链接到HTML中的head部分。您需要设置一个JS var，这样您就可以在JS文件中调用它来实例化ko。

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

我认为这就是你要找的......？

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

Answer 4

您拥有的代码非常完美。您现在需要的是将淘汰视图ViewModel设置为符合条件的observable到您从服务器接收的布尔值。请尝试以下方法：

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

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

以上是您的合格财产仍可以更改客户端的情况。如果你不需要它，你不需要它是一个可观察的，你的代码将成为：

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

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

敲除模态中的可见绑定

4 个答案: