0

我开始为具有不同过滤器小部件的搜索引擎编写一个 durandal 应用程序。我开始根据我在几个教程中看到的以下标准对视图模型进行编码（参见下面的示例，无需进一步说明），但是一旦我在两种不同的视图模型。

我注意到，当我开始复制现有小部件时：在开始的结果集是混合的，函数没有被调用而没有任何错误......然后依次更改了可观察的和函数名称，最后我只通过更改函数名称才使其工作. （例如 self.facets -> self.facetsPA 等）我花了一段时间才找到它，很高兴知道按时完成项目，但这似乎不是一个好的做法，我觉得我可能做错事（通过在 self 对象上分配所有功能？）。

感谢您的一些解释。干杯，丹尼斯

define(['durandal/http', 'durandal/app', 'durandal/system','durandal/plugins/router'],     function (http, app, system, router) {
var self = this;

var PatentOfficeItem = function(id,name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
};

self.facetsPA = ko.observableArray([]);
self.selectablePAFacets =  ko.computed(function() {
    var results = [];
    ko.utils.arrayForEach(self.facetsPA(), function(item) {
        var o = item.key();
        if (!self.officeExists(o))
            results.push(item);

    });
    return results;
});

self.selectedPatentOffices = ko.observableArray([]);
self.officeToAdd = ko.observable("");
self.addPatentOffice = function(item) {
    self.selectedPatentOffices.push(item);
};

self.removePatentOffice = function(item) {
    self.selectedPatentOffices.remove(item);
    var active = router.activeRoute();
    if (active.hash == "#/results/show") {
        app.trigger('PatentSearch:newQuery', 1);
    }
};

self.officeExists = function(code) {
    var result = false;
    ko.utils.arrayForEach(self.selectedPatentOffices(), function(item) {
        if (item.toString()==code.toString())
            result = true;
    });
    return result;
};

self.onCheckFacet = function(f) {
    var key = f.key();
    var value = f.value();
    var checked = f.checked();
    if (!self.officeExists(key))
        self.addPatentOffice(key);
    app.trigger('PatentSearch:newQuery', 1);
};

self.onCheckOffice = function(f) {
    //alert(JSON.stringify(f));
    self.removePatentOffice(f);
    app.trigger('PatentSearch:newQuery', 1);
};

self.getSetDifference2 = function(list1,list2) {
    var difference = [];
    var lookup = {};
    for (var j in list2) {
        var id = list2[j].id;
        lookup[list2[j].id] = list2[j].name;
    }
    for (var i in list1) {
        var id2 = list1[i].id;
        //alert(id);
        //if (lookup[id] == undefined ||lookup[id] === undefined) {
        if (!(id2 in lookup)) {
            difference.push(JSON.stringify(list1[i]));
            //break;
        }
    }
    //alert(JSON.stringify(difference));
    return difference;
};

return {
    activate: function () {},
    viewAttached: function() {
        setTimeout(function() {

            $(".patentFacetMulti").typeahead({
                source: function (query, process) {
                    return $.ajax({
                        url: "/assets/Content/patentoffices.json",
                        type: 'get',
                        data: {},
                        dataType: 'json',
                        success: function (result) {
                            var resultList = result.map(function (item) {
                                var aItem = { id: item.id, name: item.name };
                                return aItem;//JSON.stringify(aItem);
                            });
                            //return process(resultList);
                            return process(self.getSetDifference2(resultList,self.selectedPatentOffices()));
                        }
                    });
                },

                matcher: function (obj) {
                    var item = JSON.parse(obj);
                    return (~item.name.toLowerCase().indexOf(this.query.toLowerCase()) || ~item.id.toLowerCase().indexOf(this.query.toLowerCase()));
                },

                sorter: function (items) {
                    var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
                    while (aItem = items.shift()) {
                        var item = JSON.parse(aItem);
                        if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));
                        else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
                        else caseInsensitive.push(JSON.stringify(item));
                    }

                    return beginswith.concat(caseSensitive, caseInsensitive)

                },


                highlighter: function (obj) {
                    var item = JSON.parse(obj);
                    var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
                    var n = item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                        return '<strong>' + match + '</strong>'
                    });
                    var m = item.id.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                        return '<strong>' + match + '</strong>'
                    });
                    return ""+m+"- " + n;
                },

                updater: function (obj) {
                    var item = JSON.parse(obj);
                    //$('#IdControl').attr('value', item.id);
                    self.addOffice(item);

                    var active = router.activeRoute();
                    if (active.hash == "#/results/show") {
                        app.trigger('PatentSearch:newQuery', 1);
                    }


                    //$(this).val("");
                    return "";
                }
            });

        },500);
    },
    selectedPatentOffices:selectedPatentOffices,
    facetsPA:facetsPA
};

});

4

1 回答 1

0

如果您在讨论widgetsDurandal 的小部件定义，那么这些小部件需要返回构造函数以确保它们可以被多次实例化。上面的示例改为返回一个单例。

http://durandaljs.com/documentation/Creating-A-Widget/

define(function(require) {
    var widget = require('durandal/widget');

    var ctor = function(element, settings) {
        this.settings = settings;
    };

    ctor.prototype.getHeaderText = function(item) {
        if (this.settings.headerProperty) {
            return item[this.settings.headerProperty];
        }

        return item.toString();
    };

    ctor.prototype.afterRenderItem = function(elements, item) {
        var parts = widget.getParts(elements);
        var $itemContainer = $(parts.itemContainer);

        $itemContainer.hide();

        $(parts.headerContainer).bind('click', function() {
            $itemContainer.toggle('fast');
        });
    };

    return ctor;
});
于 2013-06-10T07:26:42.220 回答