1

基本的に、私はノックアウトに非常に慣れていません。私はたくさんの例を試してきましたが、今は気が狂っています。私がやっていることは難しいことではありません。しかし、それでもうまくいきません。

データを取り込んでオブジェクト (?) にマップし、いくつかのオブザーバブルを使用してさまざまなフィルタリングを実行しようとしています。このデータは、サーバーに書き戻す必要はありません。消費のみを目的としています。

私の壊れた例: http://jsfiddle.net/boyus/qTb5Q/3/

function Item(id, firstName, lastName, expertise, img, tag) {
    this.id = ko.observable(id);
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.expertise = ko.observable(expertise);
    this.img = ko.observable(img);
    this.tag = ko.observable(tag);
    this.fullName = ko.dependentObservable(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
    this.expertPath = ko.dependentObservable(function() {
        return "http://www.example.com/user/" + this.id();
    }, this);
    this.imgPath = ko.dependentObservable(function() {
        return "http://img835.imageshack.us/img835/5116/" + this.img();
    }, this);
}

var viewModel = {
    items: ko.observableArray([]),
    filter: ko.observable()
};

//ko.utils.arrayFilter - filter the items using the filter text
viewModel.filteredItems = ko.dependentObservable(function() {
    var filter = this.filter().toLowerCase();
    if (!filter) {
        return this.items();
    } else {
        return ko.utils.arrayFilter(this.items(), function(item) {
            return (item.fullName().indexOf(filter) > -1);
        });

    }, viewModel);


var JSONdataFromServer = '[{"id":"1","firstName":"Bill","lastName":"Nye","expertise":"Science Guy", "img":"emptyprofile.png","tag":"environment"},{"id":"54","firstName":"John","lastName":"Dow","expertise":"Software Creation","img":"emptyprofile.png","tag":"software"},{"id": "544","firstName":"Pete","lastName":"Dragon","expertise":"Magic (and Sparkles)","img":"emptyprofile.png","tag": "environment"}]';

var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

//do some basic mapping (without mapping plugin)
var mappedData = ko.utils.arrayMap(dataFromServer, function(item) {
    return new Item(item.id, item.firstName, item.lastName, item.expertise, item.img, item.tag);
});


viewModel.items(mappedData);

ko.applyBindings(viewModel);​

事前にご協力いただきありがとうございます。

それが役立つ場合（別名、私のコードは機能しません）、このコードに対する私の将来の更新は次のとおりです。

  • カテゴリによるフィルタリング (別の例ではこれが機能していると思いますが、各エキスパートのカテゴリの配列では機能していません)
  • 姓の最初の文字によるフィルタリング
  • 3 つのフィルタリング タイプはすべて同じページにある必要があります
4

1 に答える 1

1

現在のフィドルの特定の問題について：

  • ステートメントfilteredItemsの最後に中括弧がありませんでしたelse
  • toLowerCase()null または未定義で呼び出すことはできません。filter空文字列として初期化するように変更しました。
  • 比較もおそらくfullName小文字に変換する必要があります。

ここでサンプルを更新: http://jsfiddle.net/rniemeyer/qTb5Q/4/

于 2012-11-15T01:11:53.073 に答える