如何将 Knockout.JS 与服务器已在 DOM 中呈现的数据同步？

Question

在我目前看到的示例中，Knockout 似乎使用人为的硬编码数据或从某些 JSON 请求中检索到的数据来填充其模型。这不是我想要的。

当我的页面最初呈现时，服务器循环遍历我的 objects 的 collection 并显示它们（使用服务器端 blade 语法）。这是我希望模型与之同步的数据，由此可以添加或删除更多项目。重申的问题是，如果您已经从服务器加载和显示项目，您如何同步模型和视图？

要查看使用硬编码数据的示例，请查看 their example page。因此，不是从硬编码值中获取数据，而是如何从已显示的内容中获取数据？

我以为 data-bind="foreach: person" 会自动绑定服务器生成的视图和挖空模型，但事实并非如此。

目前我在页面加载时遇到以下错误，我知道这与视图模型不同步有关。

Uncaught ReferenceError: Unable to process binding "value: function (){return company }" Message: company is not defined

我想错误是因为执行ko.applyBindings(viewModel);时没有绑定实际数据。当然，由于抛出此错误，添加和删除按钮不会执行任何操作。

这里是HTML/Blade:

<?php
    $personsObserved = $po->personsObserved;
?>

@foreach ($personsObserved as $p)  
    <div class="personWell" data-bind='foreach: people'> 
       {{ Form::label('personsObserved[][name]', 'Name', ['class' => 'content-label']) }}
       {{ Form::text('personsObserved[][name]', $p->name, ['placeholder'=>'Person Name', 'required', 'data-bind'=>'value: name']) }}

       {{ Form::label('personsObserved[][company]', 'Company', ['class' => 'content-label']) }}
       {{ Form::text('personsObserved[][company]', $p->company, ['placeholder'=>'Company Name', 'required', 'data-bind'=>'value: company']) }}

       <button type="button" class="btn btn-sm btn-warning" data-bind='click: $root.removePerson'>Delete</button>
    </div>
@endforeach

即使我将 foreach 放在循环之外，它仍然不起作用。

JavaScript

var ObservedPersonModel = function(people) {

    var self = this;
    self.people = ko.observableArray(people);

    self.addPerson = function() {
        self.people.push({
            name: "",
            company: ""
        });
    };

    self.removePerson = function(people) {
        self.people.remove(person);
    };
};

var viewModel = new ObservedPersonModel([
    // Hardcoded values removed
    // Here is where I would guess that we get the existing property values from the DOM somehow
    /*{ name: "Tall Hat", company: "PeachCo"},
    { name: "Long Cloak", company: "BeachCo"}*/
]);

ko.applyBindings(viewModel);

资源我进行了一些其他搜索，以下是一些有帮助的搜索：

knockout.js - Get ViewModel from DOM element
Knockout.JS How to bind dom element bind

Answer 1

我在你的模板中没有看到 'foreach' 绑定，但我认为这不是问题所在。

你应该做的不是将 foreach 放在 blade 语法中，而是用模板制作一个简单的 div，但在 KO 的语法中（使用数据绑定）。然后，在 JS 部分，您应该实例化您的 ObservedPersonModel（应该是复数形式的 Persons，或 PersonCollection）并将其绑定到 DOM 让 Knockout 渲染项目，而不是 blade。

请记住，knockout 会根据 JS 数据呈现 DOM，并且没有后退步骤。

如何将 Knockout.JS 与服务器已在 DOM 中呈现的数据同步？

How to sync Knockout.JS with data already rendered in DOM by server?

javascript

php

laravel

knockout.js