Нокаут видимое связывание в модальном

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

вы не можете использовать 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 2

Я не уверен, как написать нокаут за этой условной логикой на мой взгляд. Если бы я только с помощью бритву, я бы написал @if (Model.IsEligible) {...} еще {...} на данных привязки линии

Вы могли бы использовать что-то вроде этого в вашем бритва. Если у вас есть скрипты @section {}, определенные в вашем разделе заголовка в HTML. Вам нужно настроить JS var, чтобы вы могли вызвать его в своем JS-файле, где вы создаете ko.

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

Я думаю, что это то, что вы ищете ...?

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

Answer 3

код у вас есть идеальный. Все, что вам нужно сейчас - установить нокаут ViewModel с его доступным наблюдаемым на логическое значение, которое вы получаете с сервера. Попробуйте следующее:

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

Answer 4

, если вы не хотите, чтобы использовать то, что упомянутый @Josh Стивенс, вы можете просто определить другой переменную в вашей модели и установите эту переменную, подписав «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> 

Edit: Быстрый способ: просто добавить <div class="ineligible" data-bind="visible: Eligible() == 0 "> на ваш взгляд, поэтому, когда Приемлемые является 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>