KnockoutJS - 如何对在选项扩展中创建的可观察对象进行数据绑定

【问题标题】：KnockoutJS - How to data-bind an observable that is created inside options extendKnockoutJS - 如何对在选项扩展中创建的可观察对象进行数据绑定
【发布时间】：2016-07-27 14:21:02
【问题描述】：

我在“extend”中扩展了一个名为“obsRandom”的可观察对象，如下所示：

var options = {
       extend: {
          "{root}": function (self) {
             self.obsRandom = ko.observable(true)
........

我已经阅读了这篇文章 http://coderenaissance.github.io/knockout.viewmodel/，它解释了 viewmodel 插件，但我仍然想不出一种方法来对创建的 observable 进行数据绑定。

我们如何对我们的 html 元素进行数据绑定

input type="radio" data-bind="checked: ???"

到这个新的扩展可观察对象？

我已经尝试过 data-bind="checked: $root.options.extend.obsRandom" 但不起作用。

【问题讨论】：

从文档看来，obsRandom 应该在您的视图模型的顶层，所以您的绑定将只是 "checked: obsRandom"

标签： javascript html knockout.js

【解决方案1】：

我之前没有使用过ko.viewmodel 库，而且我没有看到足够多的代码来给你一个准确的答案，但使用浏览器的调试器应该不难弄清楚：

从您要创建的<input> 元素中删除data-bind 属性。
为元素添加一个临时的id 属性：<input id="temp-debug">

打开你的控制台并输入：

var debugCtx = ko.contextFor(document.getElementById("temp-debug"));

探索元素的绑定上下文。最重要的部分：
- $root 将向您展示您的根视图模型是什么样的
- $data 将向您展示元素的视图模型是什么样的
- $parents 是一个数组，存储$root 和$data 之间的每个级别

使用控制台，您可以尝试不同的查询并找出正确的数据绑定。例如：您可以通过查询来查看您尝试的路径返回了什么：debugCtx.$root.options.extend.obsRandom

【讨论】：