1

アプリにオブザーバブルとして保存する必要があるものがいくつかあります。個別の veiwmodels を作成しようとしましたが、それらをバインドすると他のモデルがクリアされます。だから私は私の基本的なデータレイアウトが何であるかを投稿し、誰かがビューモデルを定義する方法を提案してくれるかどうかを見ていきます...

  • の検索結果
    • 結果名
    • 結果タイプ
  • アイテム
    • 項目名
    • タイプ
    • プロパティ
      • プロパティ名
      • プロパティ値
  • もっと？

最大のトリックは、次のように動的に作成された要素に各アイテムをバインドしようとしていることです。

    $("<div/>", {                                                       //create new div
        class: "itemView",                                              //add css class
        id: name,                                                       //set ID to item name (may change to array location later?)
        "data-bind": "template: { name: 'tmplItemView' }"
    }).appendTo("body").draggable();                                    //append to the body and make it draggable
    items[numItems] = new item();
    ko.applyBindings(items[numItems], 
        document.getElementById('#' + name));

私はこのようなものを使用しようとしています: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.htmlしかし、私が集めたものから、ビューモデルを関数として定義する方が良いので、それは私は何をしていて、ここからどこへ行くべきかわかりません。

これは、私がこれまでに持っていたすべての非機能的なフィドルです: http://jsfiddle.net/MDNAJ/

繰り返しますが、すべての結果が一覧表示され、結果をクリックして正しい情報がポップアップ表示されますが、検索結果は表示されません。

4

1 に答える 1

0

ビュー モデルの概念に欠けているものの 1 つは、オブジェクト モデルだと思います。オブジェクト モデルを作成すると、それをビュー モデルで使用できます。その初歩的なプログラミング コースのように、メインでクラスを使用して凝ったことを行う方法 (別名「オブジェクト指向プログラミング」)。

アイテムには ItemModel があり、次のようになります (OBJECT MODEL コメントに注意してください)。

//namespace myProj
var myProj = myProj || {};
var myProjViewModel = {};

myProj.PageComponent = (function ($, ko) {
    //OBJECT MODEL
    function ItemsModel(data) {
        var self = this;
        if (data === undefined) {
            data = {}; //protect the data by creating an empty object
        }
        self.name = ko.observable(data.name || "");
        self.type = data.parts || "";
        self.properties = ko.observableArray(data.properties || []);
    }
    //END OBJECT MODEL

    //KNOCKOUT VIEW-MODEL
    function PageVM(data) {
        var self = this;

        if (data === undefined) {
            data = {}; //protect the data by creating an empty object
        }
        self.searchBy = ko.observable("");
        self.resultName = ko.observable("");
        self.resultType = ko.observable("");
        self.itemsList = ko.observableArray([]);

        self.searchItem = function () {
            //ask server for items
            $.ajax({
                url: '/Page/SearchItems',
                type: 'POST',
                data: {
                    searchParameters: self.searchBy(); 
                    //where searchParameters is a variable required 
                    //by the SearchItems function
                    //in the Page Controller
                },
                dataType: "json",
                traditional: true,
                success: function (result) {
                    self.load(data);
                },
                error: function () {
                    alert("Error");
                }
            });

        };
        self.load = function (data) {
            //load Items into the ViewModel
            //which triggers an update for the observables

            //call jQuery map, which makes an array foreach data.items, do the function
            var mappedItems = $.map(data.Items, function (item) {
                //calling function and passing data: creating new ItemsModel, passing in the item
                return new ItemsModel(item); 
            });

            self.itemsList(mappedItems);
        };
    }
    //END KNOCKOUT VIEW-MODEL

    //PUBLIC METHODS
    var initModule = function (model) {
        //viewModel
        myProjViewModel = new PageVM(model);
        ko.applyBindings(myProjViewModel);
    }
    return {
        initModule: initModule
    };
    //END PUBLIC METHODS
})($, ko);

//put this in view
//$(document).ready(function () {
//    myProj.PageComponent.initModule();
//});
于 2013-06-13T15:45:33.740 に答える