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

Question

我只是用MVC-Web-API查看knockout.js,我正在尝试创建一个Hello World页面,它将每5秒更新一次页面上的时间.它每隔5秒拨打一次电话,我可以在我的控制器(断点)中看到这个,但屏幕上仍然没有显示.

更新:我一直在努力解决这个问题,现在我已经确定我从服务器返回数据,每5秒钟调用一次控制器,并返回我需要的JSON(警报显示但是,页面上的span元素上仍然没有显示任何内容.

我实际上需要使用映射功能,因为我正在开发一个更大的网站,它有一个包含50多个属性的模型,并且不特别想要在viewmodel中单独映射它们.

我在下面提供了我的代码.

<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

如果你按照文档,它应该不会太难.在第一次调用服务器时,请执行以下操作:

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

您正在使用JS对象应用绑定(如果我正确阅读文档,则getJSON返回JS对象,而不是JSON字符串).

之后,在您的重复功能中,执行:

ko.mapping.fromJS(model, viewModel);

从文档:

• 对象的所有属性都将转换为可观察对象.如果更新将更改该值,它将更新observable.
• 数组被转换为可观察的数组.如果更新会更改项目数,则会执行相应的添加/删除操作.它还会尝试使顺序与原始JavaScript数组保持一致.

Answer 2

您不需要替换完整的视图模型，而是可以更新从 Ajax 请求返回的属性，如下所示：

$(function() {
    var vm = {
        TimeDT: ko.observable(),
        TimeString: ko.observable()
    };

    function updateValues() {    
        $.getJSON("/Values/Get").done(function(data) {
            vm.TimeDT(data.TimeDT);
            vm.TimeString(data.TimeString);
        });
    }

    ko.applyBindings(vm);

    updateValues();
    setInterval(updateValues, 5000);
});

你可以在这里看到我在 JsFiddle 中制作的一个小例子。