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

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

本文关键字：DOM 同步 数据 Knockout JS 服务器      更新时间：2023-09-26

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

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

要查看使用硬编码数据的示例，请查看它们的示例页面。因此，与其从硬编码的值中获取数据，不如如何从已经显示的值中获得数据？

我认为拥有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

即使我把前臂放在循环之外，它仍然不起作用。

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-从DOM元素获取ViewModel
  • Knockout.JS如何绑定dom元素绑定

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

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

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

相关文章：