0

私はknockoutjsを学ぶことにしましたが、jsonをビューモデルにバインドする際に少し問題があります。私はその上でヒープを検索し、物事のヒープを試しましたが、何かを逃したに違いありません。

Javascript：

    var data = {
        "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
        "TestText": "Hello World"
    };

    var viewModel = {};
    ko.mapping.fromJSON(data, viewModel);

    ko.applyBindings(viewModel);

HTML

TestText: <span data-bind="text: TestText"></span><br>
TestList: <select id="TestList" 
            data-bind="
            options: TestList, 
            optionsText: 'Name', 
            optionsValue: 'ID', 
            optionsCaption: 'Please Select'"></select>

編集

サーバーから取得したjsonの例として、変数「data」を使用しました。とにかく、私は上記のコードをgetJSONで更新しましたが、getJSONを使用していないため、上記の例では実際には表示できないエラーが発生します。

更新されたJAVASCRIPT：

var viewModel;
$.getJSON('/myurl',
    function (data) {
        viewModel = data;
    });

alert(viewModel);

$(function() {
    ko.applyBindings(viewModel);
});

私がここで抱えている問題は、アラートボックスがそこにある限り、それが機能することです。その行をコメントすると、機能しません！

4

2 に答える 2

2

最初の問題は、データを1つのメンバーのみを含む配列として宣言しているが、データバインド宣言内でこの配列を参照していないことです。

次に、JavaScriptオブジェクトとしてデータがある場合は、fromJSONは必要ありません。

更新されたJSコード：

var data = {
    "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
    "TestText": "Hello World"
};

var viewModel = data;//{};

ko.applyBindings(viewModel);

ワーキングフィドル： http： //jsfiddle.net/AfgAG/19/

編集：質問の更新と最初の回答を反映するように回答を更新しました。\

ビューモデルには、オプションのバインドが機能するための監視可能な配列としてオプションリストが必要です。

また、AJAX呼び出しで更新するときに、構造が定義され、データバインディングが機能するようにオブザーバブルが定義された状態で、ビューモデルを開始することをお勧めします。

更新されたjavascriptコードについては、以下を参照してください。フィドル側にアクセスできなかったため、フィドルを作成できませんでした。

var viewModel = 
    {
        TestText: ko.observable('My Initial Text'),
        TestList: ko.observableArray([])
    }

ko.applyBindings(viewModel);

// using set time out here to simulate your ajax call.
setTimeout(function () {
    // this would normally be the content for your getJson success method. 
    // this is where you use your from JSON. 
    // data is a javascript object from ajax response. 
    var data = {
        "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
        "TestText": "Hello World"
    };
    // update the view model observable properties.
    viewModel.TestText(data.TestText);
    viewModel.TestList(data.TestList);
}, 2000);
于 2013-02-05T04:02:37.353 に答える
0

私はそれを理解しました。参考までに、これは私がやったことです：

JavaScript

    var viewModel = (function () {
        var self = this;
        this.model = ko.observableArray([]);

        $.getJSON('/myurl',
            function (data) {
                self.model = ko.mapping.fromJS(data, self.model);
                ko.applyBindings(self.model);
            });
    });

    ko.applyBindings(new viewModel());

html

<span data-bind="text: TestText"></span>
<select id="TestList" 
            data-bind="
            options: TestList, 
            optionsText: 'Name', 
            optionsValue: 'ID', 
            optionsCaption: 'Please Select'"></select>
于 2013-02-05T22:44:57.350 に答える