在模式中敲除可见绑定

我有一个模式，需要根据我的视图模型中的属性是否为true来显示文本。我有一个ajax调用来确定信息，但我对淘汰赛不是很熟悉，需要一些帮助。在模式中敲除可见绑定

我需要在“合格”div中显示所有内容，如果属性为true并且其值为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>

来源

2016-03-23 xyzcode

div是真的不同吗，还是仅仅因为class而有所不同呢？ –

你不能用一个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; }

这工作就像可见约束力。

来源

2016-03-23 00:12:18

我之所以犹豫是否使用'if'是段落内的文字标签来自不同的网站。由于可见不删除DOM中的元素，我认为这是一个更安全的选择。我错了吗？无论哪种情况，我都不确定实际淘汰赛对于来自viewModel的数据的外观。 – xyzcode

确定il告诉你另一种方式2分钟@xyzcode –

让我知道如果这更好@xyzcode –

我不知道如何在我的观点下写出条件逻辑后面的淘汰赛。如果我只是用剃刀，我会写@if （Model.IsEligible）{...}否则{...}的数据绑定线

你可以使用这样的事情在你的剃刀视图。如果你有一个@section脚本{}定义了链接到你的HTML头部分。你需要设置一个JS变量，所以你可以在你实例化ko的JS文件中调用它。

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

我认为这是你在找什么...？

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

来源

2016-03-23 02:06:02 Budhead2004

你的代码是完美的。现在你所需要的就是将knockout 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); 
}

来源

2016-03-23 09:39:54 Yan

如果它回答了您的问题，请将其标记为答案。 – Yan

，如果你不想用什么@Josh史蒂文斯提到的，你可以简单地定义另一变量，并通过订阅'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 ">在你看来因此每当符合条件的假，这个比较的结果是真的

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

来源

2016-03-23 23:50:01

在模式中敲除可见绑定

回答

相关问题