在模式中敲除可見綁定

我有一個模式，需要根據我的視圖模型中的屬性是否爲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

在模式中敲除可見綁定

回答

相關問題