javascript - 如何使用 BreezeJS 检索数据？

Question

我正在使用带有 Breeze 和 Angular 的 MVC 4。

我已经创建了一些域模型，我只想显示模型列表。这是我的代码:

API Controller :

[BreezeController]
public class TournamentApiController : ApiController
{
    private EFContextProvider<TournamentContext> _contextProvider;

    public TournamentApiController()
    {
        _contextProvider = new EFContextProvider<TournamentContext>();
    }

    [HttpGet]
    public string Metadata()
    {
        return _contextProvider.Metadata();
    }

    [HttpGet]
    public IQueryable<Tournament> Tournaments()
    {
        return _contextProvider.Context.Tournaments;
    }

    // ~/breeze/todos/SaveChanges
    [HttpPost]
    public SaveResult SaveChanges(JObject saveBundle)
    {
        return _contextProvider.SaveChanges(saveBundle);
    }
}

DataService.js:

/* dataservice: data access and model management layer */
app.dataservice = (function (breeze) {

    breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);

    var serviceName = '/breeze/TournamentApi'; // route to the same origin Web Api controller

    // *** Cross origin service example  ***
    //var serviceName = 'http://todo.breezejs.com/breeze/todos'; // controller in different origin

    var manager = new breeze.EntityManager(serviceName);
    // manager.enableSaveQueuing(true);

    var dataservice = {
        getAllTournaments: getAllTournaments,
        createTournament: createTournament,
        saveChanges: saveChanges,
    };
    return dataservice;

    /*** implementation details ***/
    function getAllTournaments() {
        var query = breeze.EntityQuery
                .from("Tournaments");

        return manager.executeQuery(query).then(getAllSucceeded);
    }

    function getAllSucceeded(data) {
        debugger;
        return data.results;
    }

    function createTournament(name) {
        return manager.createEntity('Tournament', { Name: name });
    }

    function saveChanges() {
        return manager.saveChanges().fail(fail);
    }

    function fail(error) {
        console.log = error;
        debugger;
    }
})(breeze);

和我的 Angular Controller :

$scope.getAllTournaments = function () {
    dataservice.getAllTournaments().then(getAllSucceeded);
}

function getAllSucceeded(data) {
    debugger;
    if (data.length > 0)
        $scope.tournaments = data;
    else
        $scope.tournaments = [];
}

$scope.getAllTournaments();

在客户端我可以看到存储在数据库中的 4 个对象。然而，该列表包含如下对象:

0: e.dataType
1: e.dataType
2: e.dataType
3: e.dataType

当我展开这样的对象时，我会看到:

_backingStore: Object
entityAspect: o
__proto__: Object1

当我进一步扩展 _backingStore 时，我看到了以下内容:

Date: Mon Jan 01 1900 00:00:00 GMT+0100 (W. Europe Standard Time)
Id: 1
Name: "123"

这当然是我需要的东西。

我感觉我做错了什么，因为我认为在迭代列表时不应该在客户端代码中使用 e.dataType._backingStore 。

我需要做什么才能只调用属性名称而不是整个路径？

Answer 1

您没有说您的 Angular 应用程序失败，也没有说绑定(bind)失败，也没有说您在编写 aTournament.name 时无法获取值。这一切都有效，是吗？

如果没有，请告诉我们。

我认为您寻求的是对在调试器中检查实体时看到的值的解释。

首先，不，您不应该直接引用_backingstore...永远。名称中的“_”告诉您这是禁止的。

在解释发生了什么之前，我必须向您询问有关 e.dataType._backingStore 的问题。我从未见过e；从未见过e.dataType。我无法在我使用的 4 个调试器(Chrome、IE10、FF、Visual Studio 2012)中重现它。请告诉我们您正在使用哪个浏览器进行调试。我有一种感觉答案就在那里。

但是回到故事......

确实，这些实体在调试器中看起来确实有点奇怪。它们都或多或少地显示一个属性列表:

_backingStore: ObjectentityAspect: ctor__proto__: Object

您的实体属性显然已经消失。他们去哪儿了？这怎么可能行得通？但它确实如此!显然您已经尝试过我们的 Angular 示例应用程序。他们工作得对吗？例如，他们展示了 Todo 描述。

是的，当您深入_backingStore时您会找到它们。但 Angular 并没有这样做。你也不应该这样做

这个谜团的答案是这些 Breeze 实体是使用 ECMA Script 5“defined properties”构建的。您的实体属性作为已定义的属性来实现，其中包含内部有 Breeze 逻辑的 getter 和 setter。

出于某种原因，调试器不会列出定义的属性，即使它们在那里。尽管您不会在列表中看到aTournament.name 属性，但您可以很好地读取和设置它。这就是 Angular 正在做的事情。你也应该如此。

FireBug 调试器(适用于 FireFox)在显示已定义属性方面比大多数调试器做得更好。在此快照中，我选择了第一个实体并输入了一个句点； FireBug 显示了我的选择，其中包括实体属性(例如 ID、描述……)。

要记住的是，您的实体属性确实存在，您可以按照预期的方式使用它们进行编码。不要让调试器欺骗了您。

如果您使用的是较旧的浏览器(例如 IE8)，则这些都不成立。较旧的浏览器不支持定义的属性，Angular+Breeze 将无法使用它们。如果这些浏览器对您来说确实很重要并且您想使用 Breeze，请考虑替代模型库，例如 Knockout(请参阅 HotTowel 以获取与 Angular+Breeze 相当的完整堆栈)。