如何保持服务器加载的数据不被Knockout JS在页面加载时“消隐”？
我正在努力了解Knockout JS。 困扰我的是我绑定的数据被消隐了 。 这很烦人，因为我想显示我从服务器检索的数据。
一个例子：
Name: name; ?> 结果是： Name: John B
现在，如果我使用Knockout将其数据绑定到此：
Name: name; ?>
结果是： Name:
JS将是这样的：
var viewModel = { name: ko.observable() // Initially blank <--- this is the culprit }; ko.applyBindings(viewModel);
那么为了显示/保存数据我需要做什么？
难道Knockout以某种方式保留像Angular JS这样的数据吗？
注意我正在使用Yii MVC框架来处理许多服务器端的东西。 使用它来加载页面加载数据，使我免于编写大量的JS Ajax代码。 我想使用Knockout来减少我拥有的jQuery代码量，而不是添加它:)
另一种方法是构造viewmodel，将服务器中的值直接提供给observable。
var viewModel = { name: ko.observable(name; ?>); }; ko.applyBindings();
尝试从HTML初始化一个observable的值是危险的，因为有很多方法可以重置observable的值，特别是如果一个元素包含在使用显式/隐式模板的父绑定中，比如if绑定。
John Doe
在上面的示例中，每当someFlag值从false变为true时，span元素上的文本绑定将被重新初始化。
以下是两种解决方法，您可以尝试避免两次声明数据（请注意，它们并不直接提供将数据保存在html文件中的方法）：
解决方案1：将默认模型放在单独的js / php文件中
创建一个php文件：
var defaultVm = { name: 'name; ?>', anyVariable: 'anyVariable; ?>' }
然后你将这个php文件包含为js文件并使用它初始化你的viewmodel：
var viewModel = { name: ko.observable(defaultVm.name); anyVariable: ko.observable(defaultVm.anyVariable); }; ko.applyBindings(viewModel);
解决方案2：使用ko.mapping插件
创建一个php文件：
{ "name": "name; ?>", "anyVariable": "anyVariable; ?>" }
然后在你的js中，你可以使用ko.mapping插件：
var viewModel = function (data) { ko.mapping.fromJS(data, {}, this); }; ko.applyBindings(new viewModel(getYourPhpFileTheWayYoulike));
这允许您以异步方式异步获取数据（如果需要）：
$.getJSON("yourphpmodelurl", function (data) { ViewModelInstance = new viewModel(data); ko.applyBindings(ViewModelInstance); }
您可以创建自定义绑定处理程序来执行此操作：
ko.bindingHandlers.textInitialized= { init: function (element, valueAccessor) { valueAccessor()(element.innerHTML); // get the current value and update the observable }, update: function (element, valueAccessor) { var value = valueAccessor(); element.innerHTML = ko.utils.unwrapObservable(value); } };
然后你可以像这样绑定到你的viewmodel：
Name: John B
在jsFiddle之后编辑：
你在jsFiddle中创造了一个完全不同的东西。 一些东西：
- 在autocomplethandler中，你使用我提供的代码，但是：你想设置“value” – 属性，而不是innerHTML，所以你应该将它改为
element.value而不是element.innerHTML。 - 您同时拥有自动完成绑定和值绑定。 它们都在value-attribute上工作（如果你按照我的第一条评论）。 第二个将在第一个之后进入并撤消该更改。
我已经修改了这些变化的小提琴： http ： //jsfiddle.net/P8N77/24/