在我到目前为止看到的示例中,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);
资源 我还进行了一些其他搜索,以下是一些有帮助的搜索:
最佳答案
我在您的模板中没有看到“foreach”绑定(bind),但我认为这不是问题所在。
您应该做的不是将 foreach 放在 Blade 语法中,而是使用模板制作一个普通的 div,但使用 KO 的语法(使用数据绑定(bind))。 然后,在 JS 部分,您应该实例化 ObservedPersonModel(应该是复数形式的 Person,或 PersonCollection)并将其绑定(bind)到 DOM,以让 Knockout 渲染项目,而不是 Blade。
请记住,knockout 是根据 JS 数据渲染 DOM,并且没有后退一步。
关于javascript - 如何将 Knockout.JS 与服务器已在 DOM 中呈现的数据同步?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29496887/