0

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"
    }
]
4

1 回答 1

0 
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
    };
});
于 2012-11-01T17:40:59.807 回答