knockout.js - 如何使用映射插件进行淘汰赛？

Question

我写了以下代码

$(function() {



    function get_updates () {
        $.getJSON('/new-lines.json', function(data) {
            var fullViewModel= ko.mapping.fromJS(data);
            ko.applyBindings(fullViewModel)


        });
    }

    function poll()
    {
        setTimeout(function(){
        get_updates();
        poll();},3000)

    }




    poll()
});

JSON 数据如下所示：

{"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"}

我应该如何写这html部分？

我对javascript很陌生。请帮忙。

Answer 1

您的问题有点误导，因为您似乎正确使用了映射插件。

不正确的是您使用淘汰赛的方式。您每 3 秒轮询一次，加载数据然后重新绑定。applyBindings对于典型的 KO 应用程序，建议您只调用一次。

如果您定期更新模型，那么您使用映射插件的方法是正确的。这就是我的做法。

http://jsfiddle.net/madcapnmckay/NCn8c/

$(function() {
    var fakeGetJSON = function () {
        return {"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"};
    };

    var viewModel = function (config) {
        var self = this;

        // initial call to mapping to create the object properties
        ko.mapping.fromJS(config, {}, self);

        this.get_updates = function () {
            ko.mapping.fromJS(fakeGetJSON(), {}, self);
        };            
    };

    // create viewmodel with default structure so the properties are created by
    // the mapping plugin
    var vm = new viewModel({ state: "M", qualities: [], name: "Foo" });

    function poll()
    {
        setTimeout(function(){
            vm.get_updates();
            poll();
        }, 3000)
    }

    // only one call to applybindings        
    ko.applyBindings(vm);
    poll();
});

和一个示例 html

<h1>Name <span data-bind="text: name"></span></h1>
<h2>State <span data-bind="text: state"></span></h2>
<ul data-bind="foreach: qualities">
    <li data-bind="text: $data"></li>
</ul>

希望这可以帮助。