Нокаут $ привязка данных к HTML-элементу

Question

Итак, предположим, что у меня есть эта ViewModel с именем люди, который состоит из массива человек литералов объектов, как

[{ name = John, age = 30, sex = male }, 
{ name = Mike, age = 29, sex = male }, 
{ name = Anna, age = 28, sex = female }] 

И предположим, что я хотел-данных связывать каждый человек на <li>, как

<ul data-bind="foreach: people"> 
    <li data-bind="text: name"></li> 
</ul> 

Но, возможно, может быть, через data-bind="with: $data", чтобы связать объект целиком с <li>, так, например, когда я нажимаю <li>, некоторые другие <div> отображает остальную информацию, которая в этом примере была бы полом и сексом?

Как будто я хотел, чтобы <li> содержал данные объекта человека, поэтому я мог бы использовать его в другом месте.

Answer 1

Как правило, вы хотели бы создать подобно selectedPerson наблюдаемыми на уровне зрения модели, а затем вы могли бы сделать что-то вроде:

<ul data-bind="foreach: people"> 
    <li data-bind="click: $parent.selectedPerson"> 
     <span data-bind="text: name"></span> 
     <div data-bind="visible: $parent.selectedPerson() === $data"> 
       <span data-bind="text: age"></span> 
     </div> 
    </li> 
</ul> 

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

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

<div data-bind="with: selectedPerson"> 
    .... 
</div> 

Быстрой скрипка: http://jsfiddle.net/rniemeyer/8dRZ4/