挖空:绑定到包含句点的 ID?

Question

我有一个如下所示的下拉列表：

<select id="Object1.PropertyX" name="Object1.PropertyX" data-bind="value: Object1.PropertyX">
//etc
</select>

它从 MVC ASP.NET 获取此 ID，其中它是对象的属性。

绑定通过ko.applyBindings(ViewModel, $("body")[0]);应用。

页面加载时，将发生以下错误：

knockout-3.4.2.js:73 Uncaught TypeError: Unable to process binding "visible: function(){return (($root.ComparingProperty() !='') && ($root.Object1.PropertyX() != $root.ComparingProperty())) }"
Message: Cannot read property 'PropertyX' of undefined

$root相当于ko.dataFor(document.body)。

在此之后，控制台中的$root显示Object1.PropertyX确实存在，并且Symbol(_latestValue)在页面加载时具有属性的值。但是，$root.Object1是未定义的，Symbol(_latestValue)不会随下拉列表而更改。

我错过了什么？

Answer 1

Knockout 使用点表示法在对象中导航。data-bind="value: Object1.PropertyX"表示对象Object1的绑定PropertyX，这抛出$root.Object1 is undefined错误，因为Object1不存在。

可以使用$data绑定上下文通过括号表示法引用当前绑定对象的属性：data-bind="value: $data['Object1.PropertyX']"。请看以下示例：

ko.applyBindings({
'Object1.PropertyX': ko.observable()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select id="Object1.PropertyX" name="Object1.PropertyX" data-bind="value: $data['Object1.PropertyX']">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<p>
Object1.PropertyX: <strong data-bind="text: $data['Object1.PropertyX']"></strong>
</p>