jquery - Knockout.js - 每 5 秒更新页面一次新值

Question

我正在使用 MVC-Web-API 查看 Knockout.js，并尝试创建一个 Hello World 页面，该页面每 5 秒更新一次页面上的时间。它每 5 秒进行一次调用，我可以在我的 Controller (断点)中看到这一点，但屏幕上仍然没有任何显示。

更新:我仍在研究这个问题，现在我已经确定我正在从服务器获取数据，每 5 秒对 Controller 进行一次调用，并且它正在返回我需要的 JSON(警报显示了这一点)但是页面上的 span 元素上仍然没有任何显示。

我实际上需要使用映射函数，因为我正在开发一个更大的网站，该网站有一个具有 50 多个属性的模型，并且并不特别想遍历它们并将它们单独映射到 View 模型中。

我在下面包含了我的代码。

<span data-bind="text: TimeString"></span>

<script type="text/javascript">
    var viewModel;
var getUpdates = setInterval(function () {
    $.getJSON(
        "/Values/Get", {},
        function (model) {
            alert(model.TimeString);
            ko.mapping.fromJS(model, viewModel);
        });
}, 5000);

$(document).ready(
    function () {
        $.getJSON(
            "/Values/Get", {},
            function (model) {
                var viewModel = ko.mapping.fromJS(model);
                alert(model.TimeString);
                ko.applyBindings(viewModel);
            });
    });

function bindViewModel(model) {
    ko.applyBindings(model);
}

public class HelloWorldModel
{
    public DateTime TimeDT { get; set; }
    public String TimeString { get; set; }
}

    public class ValuesController : Controller
{
    public HelloWorldModel Model = new HelloWorldModel();

    [System.Web.Mvc.AcceptVerbs(HttpVerbs.Get)]
    public JsonResult Get()
    {
        Model.TimeDT = DateTime.Now;
        Model.TimeString = Model.TimeDT.ToString("HH:mm:ss");

        return Json(Model, JsonRequestBehavior.AllowGet);
    }

    // POST api/values
    public void Post([FromBody]string value)
    {
    }

    // PUT api/values/5
    public void Put(int id, [FromBody]string value)
    {
    }

    // DELETE api/values/5
    public void Delete(int id)
    {
    }
}
}

Answer 1

如果您遵循documentation ，应该不会太难。在第一次调用服务器时，执行以下操作:

var viewModel = ko.mapping.fromJS(model);
ko.applyBindings(viewModel);

您正在应用与 JS 对象的绑定(bind)(如果我正确阅读 the documentation ，getJSON 返回 JS 对象，而不是 JSON 字符串)。

之后，在重复的函数中执行以下操作:

ko.mapping.fromJS(model, viewModel);

来自文档:

• All properties of an object are converted into an observable. If an update would change the value, it will update the observable.
• Arrays are converted into observable arrays. If an update would change the number of items, it will perform the appropriate add/remove actions. It will also try to keep the order the same as the original JavaScript array.