Как использовать плагин сопоставления для нокаута? - PullRequest
Новая
       21

Как использовать плагин сопоставления для нокаута?

4 голосов
/ 29 марта 2012

Я написал следующий код 

$(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. Пожалуйста помоги.

1 Ответ

10 голосов
/ 30 марта 2012

Ваш вопрос немного вводит в заблуждение, поскольку вы, похоже, правильно используете плагин сопоставления.

Неправильно то, как вы используете нокаут.Вы опрашиваете каждые 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>

Надеюсь, это поможет.

...