Нокаут наблюдаемый не рендеринг на экран

Question

У меня есть приложение, которое возвращает объект JSON через ajax. Я пытаюсь передать эти объекты в DOM, но что-то не работает. Вот код Нокаут

function PanelViewVM() { 
    var self = this; 


    self.Panel = ko.observable("test"); 
    self.Source = ko.observable(); 


    self.SelectPanel = function() { 

     $.ajax("/DPanel/FillIndex", { 

      dataType: 'json', 
      contentType: 'application/json', 
      success: function (data) { 


       self.Panel = data.PanelDetails[0].Panel; 
       self.Source = data.PanelDetails[0].Source; 



       //ko.mapping.fromJS(data.PanelDetails, {}, self.PanelDetails); 

      }, 
      error: function (data) { 
       console.log(data); 
      } 
     }); 

    }; 

    self.SelectPanel(); 

}; 

ko.applyBindings(new PanelViewVM()); 

Когда я запускаю код в VS и место перерыв в конце Аякса запроса, он утверждает, что self.Source и self.Panel назначили данные. Однако это не отражается в DOM. Я также добавил «Заполнитель» в панели наблюдения. Это переходит в DOM, как ожидалось.

@using System.Web.Optimization 
@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<div class="row"> 
    <p>Panel:<strong data-bind="text: Panel"></strong></p> 
    <p>Source:<strong data-bind="text: Source"></strong></p> 



</div> 





@section Scripts { 

@Scripts.Render("~/bundles/knockout") 
@Scripts.Render("~/Scripts/ViewModel/PanelViewVM.js") 

    } 

Любые идеи?

Answer 1

Вы заменяете наблюдаемый объект равным значением, возвращаемым из вызова ajax. Вам нужно будет использовать текущую наблюдаемую функцию для обновления такого значения (из памяти, но я уверен, что она будет работать).

success: function (data) { 
    self.Panel(data.PanelDetails[0].Panel); 
    self.Source(data.PanelDetails[0].Source); 
},