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

时间:2014-05-03 17:46:57

标签: asp.net-mvc-4 knockout.js asp.net-web-api breeze durandal

我正在使用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包含的屏幕截图:

Debugging info

除了需要使用括号外,它工作正常。 使用“普通”视图模型,我不需要在视图绑定中使用括号。 我无法弄清楚为什么它只发生在breeze对象(实体)上。

修改 经过进一步调查后,我注意到我的实体属于 proto._setCtor.proto ,而不仅仅是一个Object。为什么? 即使我使用微风管理器创建一个新实体 - 这是我回来的对象:(  这有什么不对?

2 个答案:

答案 0 :(得分:1)

这不是答案。这是一个让我神秘化的忏悔。 我无法复制您描述的问题。

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

<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中看到了同样的错误行为?

答案 1 :(得分:0)

Breeze将您实体的所有属性序列化为封面下的ko.computed。它使用它来拦截对属性的更改,并通知您的属性使用的所有其他位置。话虽这么说你应该只在你正在使用条件绑定的地方使用parans(例如当你将一个属性与一些字符串组合起来制作一个更长的字符串时。你只需要绑定到一个标准的ko绑定处理程序,你应该不需要它。