使用映射插件時Knockout.js可觀察陣列未從服務器更新

我在Knockout.js及其映射插件中遇到了一些問題。基本上我想從沒有數據開始，然後在頁面加載時發出Ajax請求來加載信息。我知道Ajax請求正在按預期工作，因爲我在返回時將數據記錄到控制檯。使用映射插件時Knockout.js可觀察陣列未從服務器更新

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請求正常工作。

The console is logging the the data correctly. so I know that the Ajax request is working properly. 升

查看標記：

<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抱怨的綁定不建立。 enter image description here

任何人都可以看到我做錯了什麼？最終，我希望視圖模型能夠接入更多事件，而我知道這將是另一項挑戰。但是現在我甚至無法在Ajax請求完成時正確更新綁定。

這裏發生過的教程： http://knockoutjs.com/documentation/plugins-mapping.html

-------------------- UPDATE ------------- -------------

我可以通過引用該StackExhange後回答我的問題：

Knockout JS mapping plugin confusion

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); 
     } 
    });

問題是我需要有一個空視圖模型爲此工作。

來源

2012-03-13 sheldonj

問題在於你在進行映射的方式。您不應該映射data.stories，而是data本身ko.mapping.fromJS(data, viewModel);這樣，映射插件將爲您可以在模板中使用的故事創建可觀察數組。

如果data包含您不想映射的其他元素，則可以將它們添加到忽略數組中，以便僅映射故事。

還有一件事 - 如果你開始時沒有數據，你將在頁面加載時出現此錯誤，因爲當這種屬性不存在時，Knockout會嘗試在你的視圖模型中映射stories。提前定義您的視圖模型以包含stories作爲可觀察數組。

來源

2012-03-13 22:06:34

也許我很困惑。我認爲使用映射插件的意義在於，我不必定義所有的可觀察對象。我的理解是，調用'ko.mapping.fromJS（data）';'會爲我創造它們。如果我有一個更大的可觀察對象的大對象？ – sheldonj 2012-03-13 22:17:19

這是正確的 - 它會創建來自對象的可觀察對象。但是，如果您在定義所有observable（如頁面加載）之前嘗試使用viewmodel，則會看到一個錯誤（如您的故事未定義）。 – 2012-03-13 22:37:54

我沒有注意到你沒有在頁面加載中應用綁定，所以顯然你不會在這種情況下得到錯誤。 – 2012-03-13 22:40:01

@Marek Karbarz 嗨，我不相信你應該傳遞整個viewModel。例如，如果您有頁面的模型，則該模型具有SearchCriteria對象和Results對象。當您只需要搜索時，爲什麼要將結果對象傳回？

-Edward

來源

2012-10-10 18:27:43

使用映射插件時Knockout.js可觀察陣列未從服務器更新

回答

相關問題