2012-11-20 126 views
1

我想用knockout inbuild WITH Binding做簡單的行爲。有使用ko.applyBinding與ViewModel綁定的UL-LI列表。工作正常。 現在,我正在嘗試使用列表實現選擇項目行爲。因此在ViewModel內部實現了selectPatient行爲並使用Click將其與LI標籤綁定。該方法被調用並設置observable selectedPatient變量。淘汰賽與綁定不起作用

現在有一個div在UL-LI相同級別的父級div中,我試圖使用With與selectedPatient綁定。不工作。

代碼以供參考:

<div data-role="content" id="MyPatientDiv"> 
     <div> 
      <ul data-bind="foreach:Patients"> 
          <li data-bind="click:$root.selectPatient"> 
           <table> 
            <tr> 
             <td> 
              <a href="javascript:" id="pName" sortorder="none"><span data-bind="text:LastName"></span> 
               ,<span data-bind="text:$data.FirstName"></span></a> 
             </td> 
             <td> 
              <a href="javascript:" id="pid" sortorder="none"><span data-bind="text:$data.DisplayId"> 
              </span></a> 
             </td> 
             <td> 
              <a href="javascript:" id="pLocation" sortorder="none"><span data-bind="text:$data.UnitName"> 
              </span></a> 
             </td> 
            </tr> 
           </table> 
          </li> 
      </ul> 
     </div> 
     <div id="dlgAction" databind="with:selectedPatient"> 
      What would you like to do for <span databind="text:$data.LastName"></span>,<span databind="text:$data.FirstName"></span> 
     </div> 
    </div>​ 

腳本代碼:

function PatientsModel(data) { 
    var self = this; 

    self.Patients = ko.observableArray([]); 

    if (data.patientEncounters == null) self.Patients([]); 
    else self.Patients(data); 

    self.selectedPatient = ko.observable(null); 

    self.selectPatient = function(data, target) { 
     self.selectedPatient(data); 

     //$('#dlgAction').dialog('open'); 
    }; 
} 

MyPatientList = { 
    PatientsModel: null, 
    DOMElementId: 'MyPatientDiv' 
} 

$(function(){ 
    var data = [{ 
     AccountId: null, 
     AdmissionStatus: 1 
     AttendingPhysicians: null, 
     BedId: null, 
     DisplayId: "32456", 
     EncounterKey: "00000000000000000000000000000003", 
     FirstName: "John", 
     Gender: null, 
     LastName: "Rambo", 
     LocalPatient: true, 
     MiddleName: null, 
     MyPatient: true, 
     PatientId: null, 
     PatientKey: "00000000000000000000000000000003", 
     RoomName: null, 
     SameName: false, 
     TemporaryPatient: false, 
     UnitName: "IC1", 
     VisitId: null}]; 

     data[0].LastName; 

    MyPatientList.PatientsModel = new PatientsModel(data); 
    ko.applyBindings(MyPatientList.PatientsModel, $('#MyPatientDiv')[0]); 
}); 

難道我做錯了什麼?

問候 Sumeet

回答

2

你錯過了破折號data-bind關鍵字:

<div id="dlgAction" data-bind="with:selectedPatient"> 
    What would you like to do for <span data-bind="text:$data.LastName"></span>, 
    <span data-bind="text:$data.FirstName"></span> 
</div> 

你也不必把$數據爲data-bind屬性,你可以只指定屬性名稱:

<div id="dlgAction" data-bind="with:selectedPatient"> 
    What would you like to do for <span data-bind="text: LastName"></span>, 
    <span data-bind="text: FirstName"></span> 
</div> 

編輯:它適用於我。這裏是一個小提琴:http://jsfiddle.net/vyshniakov/BjeP9/

數據有錯誤 - 您在AdmissionStatus屬性後錯過了昏迷。您還嘗試加載始終爲空的data.patientEncounters,因此您的收藏未初始化。

+0

我發現它是一個錯字,而複製代碼( - 符號)。而且它仍然不適合我:( – Sumeet

+0

你可以發佈你的代碼在一個小提琴嗎? –

+0

我添加了這個,仍然發現它是空的 – Sumeet