javascript - knockout 可观察未渲染到屏幕

Question

这个问题已经有答案了:

Setting value of Observable not updating in Knockout (1 个回答)

已关闭 8 年前。

我有一个通过 ajax 返回 JSON 对象的应用程序。我试图将这些对象传递给 DOM，但有些东西不起作用。这是 knockout 码

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 中运行代码并在 ajax 请求末尾放置一个中断时，它表明 self.Source 和 self.Panel 已分配数据。然而，这并没有反射(reflect)在 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);
},