Question

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 它变得不确定。
我必须重复内部模型，我做错了什么实现。我怎样才能从属性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
    };
});

无法为多个属性扩展KO映射

1 个答案: