javascript - 内联与可观察数组的绑定(bind)

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。

我正在尝试按如下方式绑定(bind)字段:

<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 绑定(bind)的情况下解决这个问题

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

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

演示 JSFiddle .

当然，使用 with 绑定(bind)是处理这些用例的更优雅和更合适的解决方案，你几乎做到了，你只是忘记了 text在你的内部绑定(bind)表达式中:

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

演示 JSFiddle .