2013-04-23 3 views
0

Я немного озадачен видимым связыванием нокаутом. Я создал образец, чтобы продемонстрировать проблему. Основная цель - показать некоторые div (otherDetails), когда пользователь выбирает «другую» опцию. Это не работает. Видимый не получает переоценку при изменении поля «mySelection».Нокаут видимое связывание не получает переоцененный

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Test</title> 

    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="Scripts/knockout-2.2.0.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

    function data() 
    { 
      this.mySelection = ko.observable('other'); 

      this.isOtherSelected = ko.computed(function() 
      { 
        return this.mySelection.peek() == 'other'; 
      }, this); 
    } 

    var myData = new data(); 

    $(document).ready(function() 
    { 
      $('#selections').change(function() 
      { 
       myData.mySelection = $(this).val();   
      }); 

      dataBind(); 
    }); 

    function dataBind() 
    { 
      ko.applyBindings(myData); 
    } 
    </script> 
</head> 

<body> 
     <div> 
       <select id="selections" data-bind="value: mySelection"> 
        <option value='one'>One</option> 
        <option value='two'>Two</option> 
        <option value='three'>Three</option> 
        <option value='other'>Other</option> 
       </select> 
     </div> 
     <div id="otherDetails" data-bind="visible: isOtherSelected"> 
      <span>Some controls and stuff...</span> 
     </div> 
</body> 

Заранее благодарен, Ярон.

ответ

0

Просто удалите peek():
return this.mySelection() == 'other';

функция быстрого взгляд получает значение наблюдаемого, но не подписывается внешним вычисленом наблюдаемого на изменениях. Из-за этого ваша привязка не переоценивается.

0

Вы должны работать с наблюдаемыми по-разному. Каждая наблюдаемая функция так, чтобы получить значение, которое вы должны назвать его:

return this.mySelection() == 'other'; 

Если вы хотите присвоить ей значение, вы должны передать значение этой функции:

myData.mySelection($(this).val()); 

Здесь работает скрипку: http://jsfiddle.net/kkGRs/

PS Вам не нужно использовать обработчик изменений jQuery. KO автоматически обновит значение наблюдаемого. Здесь находится реорганизованный код: http://jsfiddle.net/kkGRs/1/

+0

Большое вам спасибо! Я пропустил его в документации ... – user2310367

Смежные вопросы