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

Question

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

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

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

我认为拥有 data-bind="foreach: person" 会自动绑定(bind)服务器生成的 View 和 knockout 模型，但事实似乎并非如此。

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

Uncaught ReferenceError :无法处理绑定(bind)“值:函数(){返回公司}”
消息:公司未定义

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

这是 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”绑定(bind)，但我认为这不是问题所在。

您应该做的不是将 foreach 放在 Blade 语法中，而是使用模板制作一个普通的 div，但使用 KO 的语法(使用数据绑定(bind))。然后，在 JS 部分，您应该实例化 ObservedPersonModel(应该是复数形式的 Person，或 PersonCollection)并将其绑定(bind)到 DOM，以让 Knockout 渲染项目，而不是 Blade。

请记住，knockout 是根据 JS 数据渲染 DOM，并且没有后退一步。