KnockoutJs: получить связанный элемент из экземпляра модели

Question

Возможно ли получить соответствующий элемент (или элементы), к которому привязан экземпляр данных (модели)?

Например, у меня есть массив объектов объектов «Человек» в свойстве ViewModel.

Я связываю ViewModel к виду, который делает его, например:

<div class="people" data-bind="template: { foreach: people }"> 
    <a href="#" class="person" data-bind="text: name"></a> 
</div> 

Я затем связать несколько обработчиков событий с помощью JQuery:

$container.on('click', '.person', function(e){ 
    e.preventDefault(); 
    self.showPerson(ko.dataFor(this)); 
}); 

В моем showPerson метод, который я бы сохранить ссылка на модель. Я/мог/также сохранить ссылку на элемент, но я не хочу, если мне это не нужно.

self.showPerson = function(person) { 
    // can i get the corresponding element from the 'person' model? 
}; 

У кого-нибудь есть идеи?

Answer 1

Ваш синтаксис и использование $ container с jquery, а второй аргумент '.person' - unamil iar для меня, но в обработчике кликов нет элемента, который был нажат? Не могли бы вы передать это и вашему методу showPerson?

$container.on('click', '.person', function(e){ 
    e.preventDefault(); 
    self.showPerson(ko.dataFor(this), this); 
}); 

self.showPerson = function(person, element) { 
    // can i get the corresponding element from the 'person' model? 
}; 

Я не знаю дороги с верхней части моей головы, чтобы получить элементы, наблюдаемым привязан, но это может быть несколько различных элементов. У вас может быть текстовое поле для «имени», отображение имени в диапазоне, использование его в вычисленных, наличие подписчиков и использование имени(). Length в вычислении в другой привязке, например.

Если вы используете отладочную версию нокаута, вы можете увидеть, что ваши наблюдаемые объекты имеют свойство _subscriptions, которое может иметь то, что вы ищете. Думаю, миниатюрная версия - это один персонаж.

Answer 2

Почему бы не переместить привязку события щелчка внутри вашего foreach?

<a href="#" class="person" data-bind="text: name, click: showPerson"></a>

В этом случае ваша showPerson() функция будет иметь правильные данные для person

EDIT:

Извините, но я предполагаю, что я пропустил ядро ​​вашего вопроса:

self.showPerson = function (person, event) { 
    element = event.srcElement 
    ... 
} 

Answer 3

self.showPerson = function(data, event) { 
    // event.currentTarget is the DOM element 
    // $(event.currentTarget) gives the jQuery element 
} 

Answer 4

Вы можете просто создать пользовательские привязки

// data-bind="element: observable" 
    // sets observable to element .. 
    ko.bindingHandlers.element = { 
     init: function(element, valueAccessor) { 
      var target = valueAccessor(); 
      target(element); 
     } 
    }; 

В вашей модели представления, создать 'поле' для сохранения элемента:

person.el = ko.observable(null); 

Тогда в шаблоне HTML ..

<div data-bind="element: el"> .... </div> 

Answer 5

Я думаю, что лучшая практика - это t o привязать непосредственно к функции на модели представления, а не прикреплять обработчики.

Click binding to parent function in foreach