javascript - 如何防止从服务器加载的数据在页面加载时被 Knockout JS 获取 "blanked out"？

Question

我正在尝试理解 Knockout JS。令我困扰的是，我绑定(bind)的数据被清除。这很烦人，因为我想显示从服务器检索到的数据。

一个例子:

Name: <span class="name"><?php echo $data->name; ?></span>

结果是:姓名:John B

现在，如果我使用 Knockout 将其数据绑定(bind)到此:

Name: <span data-bind="text: name" class="name"><?php echo $data->name; ?></span>

结果是:名称:

JS 会是这样的:

var viewModel = {
    name: ko.observable() // Initially blank <--- this is the culprit
};
ko.applyBindings(viewModel); 

那么我需要做什么才能显示/保留数据？
Knockout 不能像 Angular JS 那样以某种方式保留数据吗？

注意我正在使用 Yii MVC 框架来处理很多服务器端的事情。使用它在页面加载时加载数据，使我免于编写大量 JS Ajax 代码。我想使用 Knockout 来减少我拥有的 jQuery 代码量，而不是添加它:)

Answer 1

另一种方法是构建您的 View 模型，将您的值从服务器直接提供给可观察对象。

<span data-bind="text: name"></span>

---

var viewModel = {
  name: ko.observable(<?php echo $data->name; ?>);
};

ko.applyBindings();

尝试从 HTML 中初始化一个 observable 的值是危险的，因为有很多方法可以重置 observable 的值，特别是如果一个元素包含在使用显式/隐式模板的父绑定(bind)中，比如 如果绑定(bind)。

<div data-bind="if: someFlag">
    <span data-bind="text: name">John Doe</span>
<div>

在上面的示例中，每次 someFlag 值从 false 变为 true 时，span 元素上的文本绑定(bind)将被重新初始化。