하나 이상의 특성에 대해 KO 매핑을 확장 할 수 없습니다.

Question

KO 초보자 : 다음 검색 결과 구현에서 mappingPlugin을 사용하여 searchData JSON 배열을 내 뷰 모델에 매핑합니다. 내가 이해할 수없는 것은

<div id="contacts" class="view animated fadeInLeft"> 

    <h3>Search results for {{#routeData}}{{term}}{{/routeData}}</h3> 
    <ul data-bind="template: { name: 'searchresults-template', foreach: searchResults }"></ul> 

</div> 

<script type="text/html" id="searchresults-template"> 

    <!--<li data-bind="attr: {'class': iconClass}">--> 
    <li> 
     <h4><span data-bind="text: type"></span></h4> 
     <p><b>When created:</b> <span data-bind="text: untilNow"></span></p> 
     <p><b>By:</b> <span data-bind="text: createdBy"></span></p>   
     <p><b>Company:</b> <span data-bind="text: company"></span></p> 
     <hr/> 
    </li> 

</script> 

<script> 
    require(['searchresults'], function (searchresults) { 
     var searchTerm = "{{#routeData}}{{term}}{{/routeData}}"; 
     searchresults.get(searchTerm); 
    }); 
</script> 

: 이것은 다음과 같은 템플릿을 채우기 위해 호출되는

define('searchresults', ['ko', 'lodash', 'datacontext', 'moment'], function (ko, _, datacontext, moment) { 

    var get = function (term) { 
     amplify.request("appsearch", { 'searchterm': term }, function (searchData) { 

      var viewModel = {}; 

      var mapping = { 
       'untilNow' : { 
        create: function (options) { 
         var innerModel = ko.mapping.fromJS(options.data); 
         innerModel.untilNow = moment(innerModel.lastSentDate()).fromNow(); 
         return innerModel; 
        } 
       }, 
       'iconClass': { 
        create: function (options) { 
         var innerModel = ko.mapping.fromJS(options.data); 
         innerModel.iconClass = "icon-" + innerModel.type(); 
         return innerModel; 
        } 
       } 
      }; 

      viewModel.searchResults = ko.mapping.fromJS(searchData, mapping.untilNow); 
      ko.applyBindings(viewModel); 
     }); 
    }; 
    return { 
     get: get 
    }; 
}); 

: 나는 또한 나의 일부 데이터의 조작 버전을 표시하기 위해 두 개의 추가 속성을 생성 : 분명히 KO 는 단지 {}을 기대로

• 왜 mapping.untilNow에 난 그냥 매핑을 사용할 수 없습니다. 어떤 결과로 으로 iconClass를 사용할 수 없으므로 정의되지 않습니다.
• 내부 모델 구현을 반복해야하는 것이 무엇이 잘못 되었습니까? KO 스타일의 속성을 어떻게 추상화 할 수 있습니까?
• 또한 나는 ko.mapping을 할당해야한다는 것을 조금은 알게되었다. viewModel.searchResults가 아니라 viewModel이지만 유일한 방법은 mt 템플릿을 반복 할 수있는 방법이다.

저는 KO의 기본적인 측면을 이해하지 못합니까? 데이터를 가져 와서 템플릿에 적용하고 그 일부를 조작하는 몇 가지 메소드를 추가하는 것이 올바른 방법일까요? searchData의의

감사 무리

샘플 스트림 :

[ 
    { 
     "type": "Campaign", 
     "lastSentDate": "/Date(634873003155215782)/", 
     "createdBy": "Stephen Parker", 
     "company": "Virgin Media" 
    }, 
    { 
     "type": "Person", 
     "lastSentDate": "/Date(1198908717056-0700)/", 
     "createdBy": "John Smith", 
     "company": "Concep LTD" 
    }, 
    { 
     "type": "Campaign", 
     "lastSentDate": "\/Date(1239018869048)\/", 
     "createdBy": "Stephen Parker", 
     "company": "Virgin Media" 
    }, 
    { 
     "type": "Company", 
     "lastSentDate": "/Date(1198908717056-0700)/", 
     "createdBy": "Stephen Parker", 
     "company": "Virgin Media" 
    } 
] 

Answer 1

define('searchresults', ['ko', 'lodash', 'datacontext', 'moment'], function (ko, _, datacontext, moment) { 

    var get = function (term) { 
     amplify.request("appsearch", { 'searchterm': term }, function (searchData) { 

      var resultsItem = function (data) { 
       var self = this; 
       self.id = ko.observable(data.id); 
       self.type = ko.observable(data.type); 
       self.lastSentDate = ko.observable(data.lastSentDate); 
       self.createdBy = ko.observable(data.createdBy); 
       self.company = ko.observable(data.company); 
       self.untilNow = ko.computed(function() { 
        return moment(self.lastSentDate()).fromNow(); 
       }); 
       self.iconClass = ko.computed(function() { 
        return "icon-" + self.type().toLowerCase(); 
       }); 
      }; 

      var dataMappingOptions = { 
       key: function(data) { 
        return data.id; 
       }, 
       create: function (options) { 
        return new resultsItem(options.data); 
       } 
      }; 

      var viewModel = { 
       searchResults: ko.mapping.fromJS([])     
      }; 

      ko.mapping.fromJS(searchData, dataMappingOptions, viewModel.searchResults); 
      ko.applyBindings(viewModel); 
     }); 
    }; 
    return { 
     get: get 
    }; 
});