Breeze.js 查询不更新淘汰赛视图答案

【问题标题】：Breeze.js query does not update knockout viewBreeze.js 查询不更新淘汰赛视图
【发布时间】：2013-06-13 13:18:45
【问题描述】：

我正在通过第一次运行良好的微风.js 查询数据。第二次视图没有更新。

html

<a id="linkQDate">Order by Newest</a>
<a id="linkQScore">Order by Score</a>

<div id="questionWrapper">
    <ul data-bind="foreach: results">
    <li>
       <strong><span data-bind="text: Score"></span></strong>
       <span data-bind="text: Titel"></span>
    </li>
    </ul>
</DIV>

$(document).ready(function () {
var manager = new breeze.EntityManager('/breeze/dbentities');
var isApplied = false;
var dmodel;

$("#linkQDate").click(function () {
    var query = breeze.EntityQuery.from("Questions").orderBy("Date");
    manager.executeQuery(query).then(querySucceeded);
    function querySucceeded(data) {
        dmodel = data;
        if (!isApplied) {

            ko.applyBindings(dmodel, $("#questionWrapper")[0]);
            isApplied = true;
       }
    }

});
$("#linkQScore").click(function () {
    var query = breeze.EntityQuery.from("Questions").orderBy("Score");
    manager.executeQuery(query).then(querySucceeded);
    function querySucceeded(data) {
        dmodel = data;
        if (!isApplied) {
            ko.applyBindings(dmodel, $("#questionWrapper")[0]);
            isApplied = true;
        }
    }

});
});

【问题讨论】：

是 'data' observables 中的属性吗？
我使用的是 Bread.js 默认值。我不知道？也许不是？
我不是 KO 专家.. 希望有人能找到这个.. 我的两个想法是，1）属性不是可观察的，所以他们不会知道更新，或者 2）因为每次分配 dmodel = data 时，都会覆盖之前的绑定应用程序。您可能需要使用 ko.mappings 扩展将属性从一个“映射”到另一个。或者其他的东西？很抱歉没有太多帮助..
也可以看看here
Data.results 是一个可观察的数组。该链接没有帮助

标签： data-binding mvvm knockout.js breeze

【解决方案1】：

如果你只使用普通的 JS 对象，它不会工作。因为它不知道底层数据何时发生变化。使用mapping plugin 使其工作：

$(document).ready(function () {
    var manager = new breeze.EntityManager('/breeze/dbentities');
    var isApplied = false;
    var dmodel;

    function querySucceeded(data) {
        if (!isApplied) {
            dmodel = ko.mapping.fromJS(data);
            ko.applyBindings(dmodel, $("#questionWrapper")[0]);
            isApplied = true;
        } else {
            ko.mapping.fromJS(data, dmodel);
        }
    }

    $("#linkQDate").click(function () {
        var query = breeze.EntityQuery.from("Questions").orderBy("Date");
        manager.executeQuery(query).then(querySucceeded);
    });

    $("#linkQScore").click(function () {
        var query = breeze.EntityQuery.from("Questions").orderBy("Score");
    });
});

【讨论】：

所以微风不返回可观察数组？网站说有。奇怪的。映射解决方案对我来说太慢了
不确定，如果确实如此，您仍然不能简单地覆盖您的模型。使用 Questions 属性制作模型，然后每次清除数组并推送新的数组值。
如果您使用默认的 Breeze 映射库，Breeze 会为实体的任何非标量导航属性返回可观察数组。对于查询结果，Breeze 返回一个标准的 javascript 数组，其中每个元素都是一个可观察的 ko。这是设计使然。如果需要，很容易获取查询结果并将它们放入 Promise 回调中的可观察数组中。我们在 Breeze 网站上提供了 Breeze zip 中的许多示例。
@jay：有没有更好的解决方案，正如我在下面发布的那样？

【解决方案2】：

来自 Tomas 的工作代码，没有映射。它要快得多：

$(document).ready(function () {
var manager = new breeze.EntityManager('/breeze/dbentities');
var isApplied = false;

var dmodel = { results: ko.observableArray() };

function queryFailed(data) {
                console.log(data);
            }
function querySucceeded(data) {
    if (!isApplied) {
        for (var i = 0; i < data.results.length; i++) {
            dmodel.results.push(data.results[i]);

        }

        ko.applyBindings(dmodel, $("#questionWrapper")[0]);
        isApplied = true;
    } else {
        dmodel.results.removeAll();

        for (var i = 0; i < data.results.length; i++) {
            dmodel.results.push(data.results[i]);
        }
    }
}

$("#linkQDate").click(function () {
    var query = breeze.EntityQuery.from("Questions").orderBy("Date");
    manager.executeQuery(query).then(querySucceeded).fail(queryFailed);;
});

$("#linkQScore").click(function () {
    var query = breeze.EntityQuery.from("Questions").orderBy("Score");
    manager.executeQuery(query).then(querySucceeded).fail(queryFailed);;
});
});

【讨论】：

很高兴看到它工作。在这种情况下，您可以在创建模型后立即应用绑定并删除检查 isApplied。代码会更干净。