内联与可观察数组的绑定

Question

我有一个模型属性定义如下：

function Field(name, size, type){
    this.name = ko.observable(name);
    this.size = ko.observable(size);
    this.type = ko.observable(type);
    this.map = ko.observable();
}

我定义了一个可观察数组 (fields)，它是上述对象的数组。在 ui 交互中，Field 对象的 map 属性将与另一个对象关联。它是一个Header 对象，具有headerName 和index 属性。

我正在尝试按如下方式绑定字段：

<ul data-bind="foreach: fields">
    <li class="form-inline">
        <span data-bind="text:name"></span> -> 
        <span data-bind="text: map.headerName"></span>
    </li>
</ul>

但是没有成功：http://jsfiddle.net/deostroll/sENA8/2/

尝试如下：

<ul data-bind="foreach: fields">
    <li class="form-inline">
        <span data-bind="text:name"></span> -> 
        <span data-bind="with: map"><span data-bind="headerName"></span></span>
    </li>
</ul>

还是不行。 http://jsfiddle.net/deostroll/sENA8/3/

Answer 1

您可以在不使用 with 绑定的情况下解决此问题

<span data-bind="text: map() && map().headerName"></span>

请注意，您需要在map 之后使用() 来获取其值，并使用map() && 确保除非将map 设置为某个值，否则不会计算表达式。

演示JSFiddle.

当然，使用with 绑定是处理这些用例的更优雅和正确的解决方案，而且您几乎成功了，只是忘记了内部绑定表达式中的text：

<span data-bind="with: map"><span data-bind="text: headerName"></span></span>

演示JSFiddle.