0

KnockoutJS を使用して、オブジェクトのリストを ajax 呼び出しにマップしたいと考えています。また、マッピングオブジェクトを渡したいです。

ボタンクリック時のバインディングは完璧に機能し、マッピングオブジェクトをスキップすると、期待どおりにすべてのプロパティが作成されます。

ここで、いくつかのプロパティのみを監視可能として作成したいので、マッピング オブジェクトを渡そうとします。しかし、そうすると、Knockout は正しいバインディングを作成しますが、観察可能なものはまったくないようです。これは、有効なマッピング オブジェクトを渡した場合にのみ発生します (ノックアウト ドキュメント)。無効なオブジェクトを渡すと、すべてのプロパティが監視可能である正しいバインディングが作成されます。

何が足りないのか教えてもらえますか?

(マッピング オブジェクトは「観察」または「コピー」では機能しません)

これは私のHTMLです：

<button type="button" data-bind="click: load">Load</button>

<form>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th></th>
            <th>Number</th>
            <th></th>
        </tr>
    </thead>

    <tbody data-bind="foreach: infos">
        <tr>
            <td>
                <input data-bind="value: Name" />
            </td>
            <td data-bind="text: Name"></td>
            <td>
                <input data-bind="value: Number" />
            </td>
            <td data-bind="text: Number"></td>
        </tr>
    </tbody>
</table>
</form>

そして、これは私のJavaScriptです:

<script type="text/javascript">

    function ViewModel() {

        var self = this;

        self.mapping = {
            observe: ["Number"]
        };

        self.infos = ko.mapping.fromJS([]);
        //self.infos = ko.observableArray();

        self.load = function () {
            // Ajax-Call
            var data = [{ "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }];

            self.SuccessfullRetrievedModelsFromAjax(data);
        };

        self.SuccessfullRetrievedModelsFromAjax = function (data) {
            ko.mapping.fromJS(data, self.mapping, self.infos);
        };
    };

    var model = new ViewModel();
    ko.applyBindings(model);

</script>

前もって感謝します！

4

1 に答える 1

0

ドキュメントobserving_only_certain_properties_using_observeを確認してください。提供された例に従って、配列ではなく直接オブジェクトobserveで使用できます。

したがって、配列レベルではなくオブジェクト レベルでマッピングを適用する必要があります。私はあなたの簡単なコードを作りました：

function ViewModel() {

    var self = this;

    self.mapping = {
        //observe: ["Number"]
        create: function (options) {
            //customize at the root level.  
            var innerModel = ko.mapping.fromJS(options.data, { observe: ["Number"] });

            return innerModel;
        }
    };

    self.infos = ko.mapping.fromJS([]);
    //self.infos = ko.observableArray();

    self.load = function () {
        // Ajax-Call
        var data = [{ "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }];

        self.SuccessfullRetrievedModelsFromAjax(data);
    };

    self.SuccessfullRetrievedModelsFromAjax = function (data) {
        ko.mapping.fromJS(data, self.mapping, self.infos);
    };
}

var model = new ViewModel();
model.load();
console.log(model.infos());

JSFiddleの例を次に示します。

于 2013-09-03T12:29:55.473 に答える