ViewModel에 녹아웃 매핑 목록을 선택하십시오.

Question

저는 첫 번째 녹아웃 프로젝트에서 약간의 지침을 사용할 수 있습니다. 지금까지 내 서비스에서 내보기 모델 내 기본 클래스를 채울 수 있지만 데이터를 사용할 수 있지만 선택 목록 상자를 바인딩 할 및 컨트롤을 예상대로 바인딩 할 노력하고있어. 이제는 선택 목록 데이터를 가져 와서 양식을 채울 수 있지만 적절한 색인을 선택하지는 않습니다.

귀하의 관심을 매우 환영합니다! 여기

// Initialized the namespace 
    var Namespace = {}; 

    // View model declaration 
    Namespace.initMemberVM = function (model) { 
     var memberViewModel = { 
      Id: ko.observable(model.Id), 
      Married: ko.observable(model.Married), 
      Name: ko.observable(model.Name), 
      SalutationId : ko.observable(model.SalutationId), 
      Salutation: ko.observable(Namespace.salutations[model.SalutationId]), 
      Salutations: Namespace.salutations 
     }; 
     return memberViewModel; 
    }; 

    Namespace.initSalutations = function (model) { 
     console.log('called initSalutations'); 
     Namespace.salutations = ko.mapping.fromJS(model); 
    }; 


// Bind the member 
    Namespace.bindData = function (model) { 
     // Create the view model 
     var viewModel = Namespace.initMemberVM(model); 

     ko.applyBindings(viewModel); 
    }; 
    $(document).ready(function() { 
     Namespace.getSalutations(); 
     Namespace.getMember(1); 
    }); 

는 AJAX 호출

[{"Id":1,"Name":"Mr","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":2,"Name":"Mrs.","IsMarried":true,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":3,"Name":"Ms","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":4,"Name":"Miss","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"}] 

을에서 반환 된 데이터이며, 여기에 HTML을

<table> 
     <tbody> 
     <tr><td>User Id</td><td colspan="4"><label data-bind="text: Name"></label></td></tr> 
     <tr> 
     <td>Salutation</td><td><select data-bind="options: Salutations, value: Id, optionsText: 'Name'"></select></td> 
     </tr> 
     <tr> 
     <td></td><td>First</td><td>Middle</td><td>Last</td> 
     </tr> 
     <tr> 
      <td>Name</td><td><input type="text" data-bind="value: FName"></td><td><input type="text" data-bind="value: MName"></td><td><input type="text" data-bind="value: LName"></td> 
     </tr> 


    </tbody> 

업데이 트를하다 : 조금 더 파고 후 내가 관찰 한 내 선택에 올바른 인덱스가 들어 있지 않은 이유는 b/c Namespace.salutations 배열이 팝이 아니라는 것입니다. 그 값을 내 memberViewModel로 설정하려고 할 때 뮬

관리 방법에 대한 안내를 보내 주시면 감사하겠습니다.

Answer 1

비슷한 문제가있는 사람들에게 유용 할 수있는 코드는 다음과 같습니다. 다시 의견을 듣지 못한 경우 데이터를 다시 가져 오기 위해 서비스에 대한 첫 번째 호출을 업데이트했습니다. 내 컨트롤러뿐만 아니라 내 회원 용. 이 접근법을 나중에 조정하여 나중에 별도로 사용할 수 있도록 참조 데이터를 저장하지만 나중에는 ...

$.each(my.dataService.member.Salutations, function (i, p) { 
        salutations.push(new my.Dropdown(selectedItem) 
          .id(p.Id) 
          .name(p.Name) 
        ); 
       }); 


    // for creating Position Models 
    my.Dropdown = function (selectedItem) { 
     var self = this; 
     self.id = ko.observable(); 
     self.name = ko.observable(); 
     // non-persitable properties 
     self.isSelected = ko.computed(function() { 
      return selectedItem() === self; 
     }); 
    };