为什么我的 KO 绑定需要括号？

Question

我正在使用 Durandal/Knockout/Breeze/WebApi 和 MVC4 作为后端开发一个网站。 我像这样通过微风查询我的 api：

var getCategories = function() {
    var query =
        entityQuery
            .from('Categories')
            .orderBy('Order');

    return manager.executeQuery(query);
};

然后，在我的视图模型上：

function initCategories() {
        service.getCategories()
               .then(querySuccess)
               .fail(queryFail);

        function querySuccess(data) {               
            vm.categories(data.results);
        };

其中 vm 是我的有界视图模型，类别当然是 observableArray。

最后，我的观点是：

<!-- ko foreach: categories -->

<div class="list_images">
    <a data-bind="attr: { href: '#search/' + queryString() }" class="hover-shadow">
        <img data-bind="attr: { src: image(), alt: name() }" width="240" height="180">
        <h5 data-bind="text: name()"></h5>
    </a>
</div>

<!-- /ko -->

这是 data.results 包含的屏幕截图：

它工作正常，除了需要使用括号。 使用“普通”视图模型，视图绑定中不需要括号。 我不明白为什么它只发生在微风对象（实体）中。

编辑 经过进一步调查，我注意到我的实体属于 proto._setCtor.proto 类型，而不仅仅是一个对象。为什么？ 即使我使用微风管理器创建一个新实体 - 这是我得到的对象:( 这里有什么问题？

Answer 1

Breeze 在后台将您实体的所有属性序列化为 ko.computeds。它使用它来拦截对属性的更改并通知使用您的属性的所有其他地方。话虽这么说，您应该只在使用条件绑定的地方使用 parans（例如，当您将属性与某些字符串组合以制作更长的字符串时。无论您只是绑定到标准 ko 绑定处理程序，您应该不需要。

Answer 2

这不是答案。这是一个让我感到迷惑的坦白。 我无法复制你描述的问题。

我完全理解你在问什么。我同意您不必使用括号。你应该可以写：

<h5 data-bind="text: name"></h5>

不必写：

<h5 data-bind="text: name()"></h5>

我从 Breeze 下载了“Todo-Knockout”示例。在确认它有效后，我开始将其更改为更像您的绑定示例。我继续工作。

您可以跟着我一步一步地进行，确认每一步后一切都按预期工作。

• 切换到转发者的评论形式：<!-- ko foreach: items -->

• 将<ul> 和<li> 标记替换为div 容器。

• 切换到 KO 的调试版本（这就是你正在使用的）

• 更新到最新的 KO (knockout-3.1.0.debug.js)

最后，我修改后的标记如下所示：

<!-- ko foreach: items -->
<div>
    <div data-bind="visible: !isEditing()">
        <input type="checkbox" data-bind="checked: IsDone" />
        <label data-bind="text: Description, click: $parent.editBegin, css: { done: IsDone, archived: IsArchived }"></label>
        <a href="#" data-bind="click: $parent.deleteItem">X</a> 
    </div>
    <div data-bind="visible: isEditing">
        <form data-bind="event: { submit: $parent.editEnd }">
            <input type="text" data-bind="value: Description, hasfocus: isEditing" />
        </form>
    </div>
</div>
<!-- /ko -->

当我进入 Chrome 开发者工具，结果从服务器返回并在控制台中显示 data.results，我得到了这个：

[proto._setCtor.proto
    CreatedAt: function dependentObservable() {
    Description: function dependentObservable() {
    Id: function dependentObservable() {
    IsArchived: function dependentObservable() {
    IsDone: function dependentObservable() {
    entityAspect: ctor
    isEditing: function observable() {
    __proto__: Object

, proto._setCtor.proto, proto._setCtor.proto]

我没有看到与您的示例有任何显着差异。你？

当您在机器上使用相同的“Todo-Knockout”样本做同样的事情时会发生什么？

你用的是什么浏览器？您是否在 Chrome 中发现了同样的不当行为？