2

Knockout.js とそのマッピング プラグインに少し問題があります。基本的に、データなしで開始し、ページの読み込み時に Ajax リクエストを作成して情報を読み込みたいと考えています。Ajax リクエストが意図したとおりに機能していることはわかっています。返されたデータをコンソールに記録しているためです。

    var projectId = @Model.Project.Id;
    var stories;
    viewModel = ko.mapping.fromJS(stories);       

    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            stories = data.stories;
            ko.mapping.fromJS(stories, viewModel);
            console.log(stories);
        }
    });

コンソールはデータを正しく記録しています。Ajax リクエストが正常に機能していることはわかっています。

コンソールはデータを正しく記録しています。 Ajax リクエストが正常に機能していることはわかっています。 l

マークアップを表示:

   <section id="project-stories"  data-bind="foreach: stories">

            <div class="project-story-container drop-shadow">

                <div class="story-summary">
                    Story Summary
                </div>
                <div class="story" data-bind="attr:{'data-id': Id}">
                    As a <span  class="actor" data-bind="text: Actor"> </span> I want to <span  class="objective" data-bind="text: Objective"> </span>, so that  <span  class="justification" data-bind="text: Justification"></span>.
                </div>
                <div class="story-controls">
                    <a href="#">Edit</a>
                </div>
            </div>
        </section>

私も電話してみました：

   var projectId = @Model.Project.Id;
    var stories;
    viewModel = ko.mapping.fromJS(stories);
     ko.applyBindings(viewModel);

    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            stories = data.stories;
            ko.mapping.fromJS(stories, viewModel);
            console.log(stories);
        }
    });

しかし、それはバインディングがセットアップされていないとKOが不平を言う原因になるだけです。 ここに画像の説明を入力

誰かが私が間違っていることを見ることができますか? 最終的には、ビュー モデルにさらに多くのイベントを関連付けたいと考えていますが、これは別の課題になることがわかっています。しかし、今のところ、Ajax リクエストが終了したときにバインディングを適切に更新することさえできません。

ここでチュートリアルを終了します: http://knockoutjs.com/documentation/plugins-mapping.html

- - - - - - - - - - アップデート - - - - - - - - - - - - -

この StackExhange Post を参照して、自分の質問に答えることができました。

ノックアウト JS マッピング プラグインの混乱

var projectId = @Model.Project.Id;
    var viewModel ={};
    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            viewModel.stories = ko.mapping.fromJS(data.stories);
            ko.applyBindings(viewModel);
        }
    });

問題は、これが機能するために空のビューモデルが必要だったことです。

4

2 に答える 2

0

問題は、マッピングを行う方法にあります。マッピングするべきではありませんdata.storiesが、dataそれ自体ko.mapping.fromJS(data, viewModel); をマッピングすることで、マッピングプラグインにより、テンプレートで使用できるストーリーの監視可能な配列が作成されます。

dataマップしたくない他の要素が含まれている場合は、それらをignore配列に追加して、ストーリーのみがマップされるようにすることができます。

もう1つ、データがない状態で開始している場合、ページの読み込み時にこのエラーが発生します。これstoriesは、そのようなプロパティが存在しない場合、Knockoutがビューモデルにマップしようとするためです。ビューモデルを事前に定義して、監視stories可能な配列として含めます。

于 2012-03-13T22:06:34.893 に答える
0

@Marek Karbarz こんにちは、ビューモデル全体を渡す必要があるとは思いません。たとえば、ページのモデルがある場合、モデルには SearchCriteria オブジェクトと Results オブジェクトがあります。検索を行うだけでよいのに、なぜ結果オブジェクトを返す必要があるのでしょうか。

-エドワード

于 2012-10-10T18:27:43.627 に答える