0

選択可能ないくつかのプロパティ値が他のプロパティによって決定されるビューモデルがあります。これはrequiresフィールドを介して設定されます。

var clusterOptions = [{
    name: "None",
    sku: "0",
    price: 0,
}, {
    name: "Standard MySQL Cluster",
    sku: "4101",
    requires: ["MySQL1"],
    price: 10,
}, {
    name: "Enterprise MS SQL Cluster",
    sku: "4102",
    requires: ["402"],
    price: 5,
}, {
    name: "NoSQL Sharding",
    sku: "4103",
    requires: ["403","404"],
    price: 10,
}];

databaseコードは機能します (さまざまなオプションをクリックすると、依存するオプションがどのように変化するかを確認できますdatabase clustering): http://jsfiddle.net/g18c/DTdyM/

このコードは静的に型付けされており、これを変換して、 で作成されたサーバー ビューモデルから任意のデータ (およびマッピングが必要) を送信できるようにしようとしていますko.mapping。

選択のために利用可能なオプションを計算するコードは、ヘルパー関数にあります (最初の静的に定義された例からの 2 つの依存プロパティの例を以下に示します)。

self.availableDatabases = myutils.ko.createComputedDepdency(this.selectedOs, this.dbOptions);
self.availableClusteringOptions = myutils.ko.createComputedDepdency(this.selectedDb, this.dbClusteringOptions);

serverData を書き直しました。モデルから知る必要があるのは、サーバーから動的に渡された配列の選択項目だけです。この場合は、オプション配列です: selectedServerOption、selectedOsOption、selectedDatabaseOptionおよびselectedClusterOption

マッピングの処理に行き詰まり、requiresMapping配列の操作方法がわかりません。

以下のオプション フィールドのマッピングを処理するにはどうすればよいですか?

var serverData = {
    options: [serverOptions, osOptions, databaseOptions, clusterOptions],

    requiresMappings: [
        {target: "selectedOs", options: "dbOptions"},
        {target: "selectedDb", options: "dbClusteringOptions"}
    ]
}

var mappingScheme = {
    'options' : {
        create: function(options){
            console.log("creating sku: " + options.data.sku);
            // 1) create dependency using requiresMappings property
            // myutils.ko.createComputedDepdency(this.selectedOs, this.dbOptions);

            // 2) subscribe to updates
            // self.availableDatabases.subscribe(function () {self.selectedDb(self.availableDatabases()[0].sku);});
        }
    },
    // ignore these mappings we don't want to observe them, they are used to define mappings for the creation function above
    'ignore' : ["requiresMappings"]
}

var viewModel = ko.mapping.fromJS(serverData, mappingScheme);

私の現在のフィドルはここにあります：http://jsfiddle.net/g18c/DTdyM/5/

4

1 に答える 1

0

ノックアウト アンサーの依存プロパティのマッピングの自動化と@PW Kad のコードを確認した後、単純なカスタム マッパーを作成することにしました。

(ko.mapping を使用して) require のマッピングを参照する方法、特にcreateマッピング関数から複数のプロパティを作成する方法を理解できなかったため、ko.mapping を介して独自のマッパーを作成することにしました (私が見ることができるように)必要に応じて複数ではなく、単一の新しいプロパティのみを返すことができました）。

一見うまく機能しますが、特に車輪を再発明した場合に理解を助けるために、コメントまたは ko.mapping を使用した代替案をいただければ幸いです。

フィドルはこちら: http://jsfiddle.net/g18c/DTdyM/26/

var myutils = myutils || {}; // if namespace is not defined, make it equal to an empty object

myutils.ko = (function(){
    var createComputedDepdency = function(targetDependency, options){
        var computedProperty = ko.computed(function(){
            var targetValue = targetDependency();

            if(typeof targetValue === "undefined")
                return [];

            return ko.utils.arrayFilter(options, function(opt){
                if(typeof opt.requires === "undefined")
                    return true;
                else
                    return opt.requires && opt.requires.indexOf(targetValue) > -1;
            });
        });        
        return computedProperty;
    };

    var createProductViewModel = function(options){

        var viewModel = {};      
        var length = options.length; 

        console.log(length);

        for (var i = 0; i < length; i++) {
            var option = options[i];

            console.log("creating property: " + option.selectedName + ", options: " + option.optionsName);

            // create the property for selected value, i.e. object.firstName = ko.observable();
            viewModel[option.selectedName] = ko.observable();

            if(option.requires)
            {
                var computedOptions = createComputedDepdency(viewModel[option.requires.target],option.data);
                viewModel[option.optionsName] = computedOptions;

                console.log("making callback scope object for: " + option.optionsName );
                var callbackScope = {
                    callbackName: option.optionsName,
                    options: computedOptions,
                    selectedValue: viewModel[option.selectedName]
                };

                // when the list of available options changes, set the selected property to the first option
                computedOptions.subscribe(function () {
                    var scope = this;
                    console.log("my object: %o", scope);   
                    scope.selectedValue(scope.options()[0].sku);
                    console.log("in subscribe function for..." + scope.callbackName);
                },callbackScope);
            }
            else
            {
                // create the property holding values, i.e. object.nameOptions = serverData.names;
                viewModel[option.optionsName] = option.data; 
            } 
        }

        // now all options have been created, loop through the array one last time and set the dependent options.
        // note that this should be done last, as dependent calculated properties will subscribed to these events
        // and update their default first options
        for (var x = 0; x < length; x++) {
            var option = options[x];

            // only need to do this to non-calculated values
            if(!option.requires)
            {
                viewModel[option.selectedName](viewModel[option.optionsName][0].sku);
            }
        }

        return viewModel;
    };

    return{
        createProductViewModel: createProductViewModel
    };
}());

var serverOptions = [{
    name: "DELL R210",
    price: 100,
    sku: 1001,
},{
    name: "DELL R710",
    price: 200,
    sku: 1002,
},{
    name: "DELL R720 Dual CPU",
    price: 300,
    sku: 1003,
}];

var osOptions = [{
    name: "Windows Standard",
    sku: "201",
    price: 1,
}, {
    name: "Windows Enterprise",
    sku: "202",
    price: 2,
}, {
    name: "CentOS",
    sku: "203",
    price: 0,
}, {
    name: "Debian",
    sku: "204",
    price: 4,
}];

var databaseOptions = [{
    name: "None",
    sku: "0",
    price: 0,
}, {
    name: "SQL Express",
    sku: "401",
    requires: ["201", "202"],
    price: 10,
}, {
    name: "SQL Standard",
    sku: "402",
    requires: ["202"],
    price: 5,
}, {
    name: "MySQL",
    sku: "MySQL1",
    requires: ["201", "202", "203"],
    price: 11,
}, {
    name: "RavenDb",
    sku: "403",
    requires: ["203"],
    price: 12,
}, {
    name: "MongoDB",
    sku: "404",
    requires: ["204"],
    price: 13,
}];

var databaseClusterOptions = [{
    name: "None",
    sku: "0",
    price: 0,
}, {
    name: "Standard MySQL Cluster",
    sku: "4101",
    requires: ["MySQL1"],
    price: 10,
}, {
    name: "Enterprise MS SQL Cluster",
    sku: "4102",
    requires: ["402"],
    price: 5,
}, {
    name: "NoSQL Sharding",
    sku: "4103",
    requires: ["403","404"],
    price: 10,
}];

var serverData = {
    options: [
        { data: serverOptions, selectedName: "selectedServer", optionsName: "serverOptions" },
        { data: osOptions, selectedName: "selectedOs", optionsName: "osOptions" },
        { data: databaseOptions, selectedName: "selectedDb", optionsName: "availableDatabases", requires: { target: "selectedOs" } },
        { data: databaseClusterOptions, selectedName: "selectedDbCluster", optionsName: "availableClusteringOptions", requires: { target: "selectedDb" } }
    ]
};

var viewModel = myutils.ko.createProductViewModel(serverData.options);

ko.applyBindings(viewModel);
于 2013-10-19T18:40:22.740 に答える