不能为多个属性扩展 KO 映射答案

【问题标题】：Can't extend KO mapping for more than one propery不能为多个属性扩展 KO 映射
【发布时间】：2012-11-01 14:56:49
【问题描述】：

KO 初学者：在搜索结果模块的以下实现中，我使用映射插件将 searchData JSON 数组映射到我的视图模型。我还创建了两个额外的属性来显示我的一些数据的操纵版本：

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
    };
});

调用它是为了填充以下模板：

<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>

我无法理解的是：

为什么在mapping.untilNow 我不能只使用映射，因为显然是 KO 只需要一个 {}。因此我不能使用 iconClass 作为它变得未定义。
我做错了什么，我必须重复 innerModel 执行。我怎样才能从属性中抽象出来 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"
    }
]

【问题讨论】：

标签： javascript jquery knockout.js jquery-templates

【解决方案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
    };
});

【讨论】：