Nakavt görünür bir ciltleme bağlama

Question

Benim görünüm modelindeki bir özelliğin doğru olup olmadığına bağlı olarak metni görüntülemesi gereken bir modelim var. Bu bilgiyi saptamak için bir ajax çağrısı yapmalıyım, ancak nakavt ile çok aşina değilim ve bağlayıcıya biraz yardıma ihtiyacım var.

"Doğru" div içindeki her şeyi göstermem gerekiyorsa, özellik true ise ve false, "uygun olmayan" div içindeki her şeyi gösterir. Aşağıda aerodinamik bir kısmı.

<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

bunun doğru olmak zorunda sahte maddesi olarak bir visible binding kullanamazsınız. Bunu düzeltmek için bir visible binding kullanmazdım, bir ko if içine koyardım, bu durumun yapılması gerektiği yoldur. Nakavt güncellemeleri her seferinde değer değiştikçe, görünür yan tümce ile aynı şekilde çalışır.

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

eleman her zaman css binding kullanmak ve elemana bir sınıf ekleyebilir çıkarmadan DOM hakkında endişe edin.

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

Bu sadece görünür bağlanma gibi çalışacaktır.

Answer 2

Görünümündeki mantıksal mantık 'un arkasına saklamayı nasıl yazacağımdan emin değilim. Sadece Razor kullanılarak olsaydı, başka (Model.IsEligible) {...} @if yazacağımı {...} veri bağlama hattında

Sen böyle bir şey kullanabilirsiniz senin ustura görünümü. Bir Profil komut dosyanız varsa, {} baş bölümünüzün HTML'deki bağlantılarını tanımladıysanız. Bir JS varsayı ayarlamalısınız, böylece ko-topladığınız JS dosyasında bunu çağırabilirsiniz.

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

Bence bu aradığınız şey ...?

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

Answer 3

sahip kod mükemmeldir. İhtiyacınız olan tek şey, ViewModel sunucusunun, sunucudan aldığınız boole değerine uygun olarak göz ardı edilmesini sağlamaktır. Aşağıdakileri deneyin:

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

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

Yukarıdaki özellik, hak sahibi özelliğinin yine de istemci tarafını değiştirebileceği durumdur. Buna ihtiyacınız yoksa, bir gözlemlenebilir olmasını buna ihtiyacı yoktur ve kod olacak: Eğer @Josh Stevens sözü neyi kullanmak istemiyorsanız

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

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

Answer 4

, sadece başka tanımlayabilir modelinizdeki değişkeni ve bu değişkeni 'Eligible' aboneliği ile ayarlayarak, hem uygun hem de uygun olmayan gözlenebilir değişkenler için DOM'ı göstermek ve gizlemek amacıyla görünür halde kullanabilirsiniz.Modelinizdeki

ekleyin:

self.Ineligible = ko.observable(false); 

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

görünümünüzü değişikliği:

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

Düzenleme: Hızlı yolu: sadece görünümde <div class="ineligible" data-bind="visible: Eligible() == 0 "> eklemek Uygun yani her yanlış, bu karşılaştırmanın sonucu doğru olurdu

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