7

私はMVC-Web-APIでknockout.jsを調べています.5秒ごとにページの時間を更新するHello Worldページを作成しようとしています. 5 秒ごとに呼び出しを行っています。これはコントローラー (ブレークポイント) で確認できますが、画面には何も表示されません。

更新：私はまだこれに取り組んでおり、サーバーからデータを取得していること、コントローラーへの呼び出しが5秒ごとに行われていること、必要なJSONを返していることを確認しました（アラートが表示されていますthis) ただし、ページの span 要素にはまだ何も表示されていません。

50を超えるプロパティを持つモデルを持ち、特にそれらをビューモデルに個別にマップしたくない大規模なWebサイトを開発しているため、マッピング機能を実際に使用する必要があります。

以下に私のコードを含めました。

<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)
    {
    }
}
}
4

3 に答える 3

6

ドキュメントに従えば、それほど難しいことではありません。サーバーへの最初の呼び出しで、次のようにします。

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

JS オブジェクトを使用してバインディングを適用しています (ドキュメントを正しく読んでいれば、getJSON は JSON 文字列ではなく JS オブジェクトを返します)。

その後、繰り返し機能で次のようにします。

ko.mapping.fromJS(model, viewModel);

ドキュメントから：

  • オブジェクトのすべてのプロパティは監視対象に変換されます。更新によって値が変更される場合、オブザーバブルが更新されます。
  • 配列は監視可能な配列に変換されます。更新によってアイテムの数が変わる場合は、適切な追加/削除アクションが実行されます。また、元の JavaScript 配列と同じ順序を維持しようとします。
于 2013-07-04T15:44:35.087 に答える
6

完全なビューモデルを置き換える必要はなく、代わりに次のように 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 で作成した小さな例をここで見ることができます。

于 2013-07-04T16:08:38.527 に答える