Bind Click Event zum Selektor mit Knockout

Question

Ich habe gesucht und ich habe verschiedene Selektoren ausprobiert, aber ich kann das nicht herausfinden. Ich folge einem Tutorial, aber ich bekomme kein Ergebnis.

Das Ereignis click scheint nicht bindend für den dynamisch generierten div Abschnitt '.person-brief'? Es ist kein click Ereignis damit verbunden. Ich versuchte auch .live(), aber das scheint veraltet gewesen zu sein.

Irgendeine Idee, was ich falsch mache?

person.js Modell

var gotoDetails = function (selectedPerson) { 
    if (selectedPerson && selectedPerson.id()) { 
     var url = '#/persondetail/' + selectedPerson.id(); 
     router.navigateTo(url); 
    } 
}; 

var viewAttached = function (view) { 
    bindEventToList(view, '.person-brief', gotoDetails); 
}; 

var bindEventToList = function (rootSelector, selector, callback, eventName) { 
    var eName = eventName || 'click'; 
    $(rootSelector).on(eName, selector, function() { 
     var ser = ko.dataFor(this); 
     callback(ser); 
     return false; 
    }); 
}; 

var vm = { 
    people: people, 
    title: 'people demo', 
    viewAttached: viewAttached 
}; 
return vm; 

person.html Ansicht

<section id="person-view" class="view"> 
    <header> 
     <a class="btn btn-info btn-force-refresh pull-right" 
      data-bind="click: refresh" href="#"><i class="icon-refresh"></i>Refresh</a> 
     <h3 class="page-title" data-bind="text: title"></h3> 
     <div class="article-counter"> 
      <address data-bind="text: people().length"></address> 
      <address>found what</address> 
     </div> 
    </header> 
    <section class="view-list" data-bind="foreach: people"> 
     <article class="article-left-content"> 
      <div class="person-brief" title="Go to person details"> 
       <small data-bind="text: firstname" class="right"></small> 
       <small data-bind="text: lastname"></small> 
      </div> 
     </article> 
    </section> 
</section> 

Answer 1

Mit KnockoutJS sollten Sie the click binding (oder alternativ the event binding), nicht jQuery verwenden, um manuell die DOM-Manipulation .

So etwas wird Ihr Code:

var vm = { 
    people: people, 
    title: 'people demo', 
    viewAttached: viewAttached 
}; 

vm.myHandler = function (person) { 
    goToDetails(person); 
    return false; 
}; 

Und da myHandler so einfach ist, dann kann man auch den goToDetails Code inline, die den Zugriff auf vm von seiner Schließung hat.

Sie binden in der Ansicht wie folgt aus:

<div class="person-brief" data-bind="click: $root.myHandler"> 
... 
</div> 

Eine allgemeine Tipp: ein Tutorial auf entweder jQuery, oder KnockoutJS. Wenn Sie letzteres verwenden, versuchen Sie so wenig wie möglich jQuery zu verwenden (was normalerweise durchaus möglich ist), verwenden Sie jQuery nicht, um das DOM zu manipulieren (außer in Custom-Binding-Handlern und After-Render-Funktionen).