Как частично связать HTML-элементы с помощью нокаута - PullRequest
Новая
       2

Как частично связать HTML-элементы с помощью нокаута

3 голосов
/ 05 марта 2012 
        <html>
<head>
    <script language="javascript" src="knockout-2.0.0.js"></script> 
    <script language="javascript" src="knockout.mapping.js"></script>   
</head>
  <div id="divFilter">
      Name <input type=text data-bind="value:NAME1"></input>
      <br>
      Address<input type=text data-bind="value:ADDRESS"></input>
      <br>
      DOB <input data-bind="value:DOB" id="DOB" name="DOB" type=text></input>
      <br>
      SSN <input data-bind="value:SSN" id="SSN" type=text></input>
  </div>
</html>
 <script>                
    var oVM_Summary=null;
    var VM_Summary= function(name1,address)
    {
         this.NAME1=ko.observable(name1);
         this.ADDRESS=ko.observable(address);             
    };
    oVM_Summary=new VM_Summary('Jon','123 addr');
    ko.applyBindings(oVM_Summary);
</script>

Когда код выполняется, DOB и SSN показывают [объект HTMLInputElement] Вопрос: - Как избежать привязки для DOB и SSN. 

    Thanks in advance...

Ответы [ 3 ]

2 голосов
/ 05 марта 2012

Обновление из ваших правок:

Если модель представления не содержит свойств DOB и SSN, то при попытке связывания произойдет ошибка.В вашем случае это на самом деле не происходит, потому что во многих браузерах вы можете получить доступ к элементам по id из оконного объекта.Таким образом, вместо того, чтобы не находить ваши свойства, он находит window.DOB и window.SSN, которые являются элементами ввода.

Если вы измените имена DOB и SSN в идентификаторах, то вы будетеначать видеть нокаут ошибки.Вы должны определить их в своей модели представления, даже если они пустые.

Обновление на основе вашего комментария: если вы хотите привязать несколько моделей представления, вам нужно будет сделать что-то вроде: 

  <div id="divFilter">
      <div id="one">
         Name <input type="text" data-bind="value:NAME1" />
         <br/>
         Address<input type="text" data-bind="value:ADDRESS" />
      </div>
      <div id="two">
          DOB <input data-bind="value:DOB" id="DOB" name="DOB" type="text" />
          <br />
          SSN <input data-bind="value:SSN" id="SSN" type="text" />
      </div>
  </div>

вызовы applyBindings будут выглядеть так: 

ko.applyBindings(new VM_One(), document.getElementById("one"));
ko.applyBindings(new VM_Two(), document.getElementById("two"));

или вы можете сделать: 

<div id="divFilter">
      <div data-bind="with: one">
         Name <input type="text" data-bind="value:NAME1" />
         <br/>
         Address<input type="text" data-bind="value:ADDRESS" />
      </div>
      <div data-bind="with: two">
          DOB <input data-bind="value:DOB" id="DOB" name="DOB" type="text" />
          <br />
          SSN <input data-bind="value:SSN" id="SSN" type="text" />
      </div>
  </div>

JS будет выглядеть так: 

var viewModel = {
    one: new VM_One(),
    two: new VM_Two()
};

ko.applyBindings(viewModel);
0 голосов
/ 08 марта 2012

Это зависит от того, что вы хотите, чтобы ваш пользовательский опыт был. Вы хотите, чтобы поле DOB было полностью исключено (то есть не показано)? Или вы хотите, чтобы он отображался, но со значением по умолчанию? Вот способ сделать каждый из них:

Вы можете полностью избежать привязок, используя привязку if. Привязка if вычисляет выражение и, если true, обрабатывает содержащиеся элементы; в противном случае игнорирует содержащиеся элементы.

«Контейнер комментариев» очень полезен для размещения привязок if, например: 

<!-- ko if:DOB -->
  DOB <input data-bind="value:DOB" id="DOB" name="DOB" type=text></input>
  <br>
<!-- /ko -->

С другой стороны, если вы хотите сохранить содержимое, но заменить нулевые или неопределенные значения значением по умолчанию (например, пробелом), вам нужно будет где-то написать код для захвата этого бизнес-правила. , Одним из способов является использование ko.computed (), описанное на knockoutjs.com.

Однако мои 2-центы таковы, что в конечном итоге легче идти вперед, и в свой конструктор добавьте наблюдаемое со значением по умолчанию: 

var VM_Summary= function(name1,address,dob,ssn)
{
    ...
    this.DOB=ko.observable(dob||'(none)');
    this.SSN=ko.observable(ssn||'(none)');
}

Вы бы по-прежнему вызывали конструктор так же: 

oVM_Summary=new VM_Summary('Jon','123 addr');
0 голосов
/ 06 марта 2012

Вы не можете связываться с DOB и SSN. Они не существуют в модели представления. Добавьте их, и все должно работать нормально.

...