6

KnockoutJSを使用してデータをページにバインドしています。ViewModelには、次のように、マッピングプラグインを使用したAJAX呼び出しからのJSON応答が入力されています。

$(function () {
    $.getJSON("@Url.Action("Get")", 
        function(allData) {
            viewModel = ko.mapping.fromJS(allData);

            viewModel.Brokers.Url = ko.computed(function()
            {
                return 'BASEURLHERE/' + this.BrokerNum();
            });

            ko.applyBindings(viewModel);
    });
});

そこの中央部分は機能しません（計算されたプロパティがなくても正常に機能します）。「ブローカー」は監視可能な配列であり、URLと呼ばれる配列内のすべての要素に計算値を追加したいと思います。hrefそのBrokers配列をforeachにバインドしており、そのURLをアンカーの属性として使用したいと思います。何か案は？

4

3 に答える 3

13

私は非常によく似た問題に取り組んできましたが、マッピングオプションパラメータを使用して、Brokerオブジェクトの作成をインターセプトし、独自のフィールドを挿入できることがわかりました。

var data = { "Brokers":[{"BrokerNum": "2"},{"BrokerNum": "10"}] };

var mappingOptions = {
    'Brokers': {
        create: function(options) {
            return (new (function() {
                this.Url = ko.computed(function() {
                    return 'http://BASEURLHERE/' + this.BrokerNum();
                }, this);

                ko.mapping.fromJS(options.data, {}, this); // continue the std mapping
            })());
        }
    }
};

viewModel = ko.mapping.fromJS(data, mappingOptions);

ko.applyBindings(viewModel);

これを実証するためのフィドルは次のとおりです：http：//jsfiddle.net/pwiles/ZP2pg/

于 2013-02-05T08:14:23.500 に答える
12

各ブローカーにURLが必要な場合は、各ブローカーにURLを追加する必要があります。

$.each(viewModel.Brokers(), function(index, broker){
    broker.Url = ko.computed(function(){return 'BASEURLHERE/' + broker.BrokerNum();});
});

BrokerNumは変更されないので、Urlを1回計算するだけでよいと思います。

$.each(viewModel.Brokers(), function(index, broker){
    broker.Url = 'BASEURLHERE/' + broker.BrokerNum();
});

ko.mapping.fromJS関数に「create」コールバックを提供することにより、マッピング中にUrlプロパティを追加することもできます。詳細については、マッピングプラグインのドキュメントを参照してください。

hrefにバインドするためにurlのみが必要な場合は、htmlの式をバインドするだけです（foreachバインディング内）。

<a data-bind="attr: {href: 'BASEURLHERE/' + BrokerNum()}">link to broker details</a>
于 2012-02-22T21:51:56.720 に答える
0

Peter Wilesのおかげで、私は非常によく似た解決策を持っています：

var ViewModel = function (data, ranges) {
    var self = this;

    this.productList = ko.observableArray();
    var productListMapping = {
        create: function (options) {
            return (new (function () {
            //this row above i don't understand...
                this.len = ko.computed(function () {
                    //just test function returning lenght of object name
                    // and one property of this model
                    return this.name().length + ' ' + self.cons_slider_1();
                }, this);

                ko.mapping.fromJS(options.data, {}, this); // continue the std mapping
            })());
        }
    }

    this.cons_slider_1 = ko.observable(100);

    ko.mapping.fromJS(data, productListMapping, this.productList);
};

いくつかの違い：私は自分自身にマッピングしていませんが、this.productにマッピングしています。入力jsonには、上記の例の「ブローカー」のような親名がありません。

var products = [
    { "id": "pp1", "name": "Blue windy" },
    { "id": "pp1", "name": "Blue windy" }];

したがって、productMappingでは、「create：」と入力しています。

しかし、私が理解していないのは、create関数の構造です。関数がプロパティを持つ新しい関数を返す理由を誰かが説明してもらえますか？どういうわけか単純化できませんでしたか？

于 2014-01-30T10:43:47.807 に答える