Breeze 和 Angular 'ToDo' 应用程序不适用于 IE 8

Question

我已经从http://www.breezejs.com/documentation/download下载了示例“Breeze 0.83.5”应用程序

Angular 'ToDo' 示例不适用于 IE8。

我在 Breeze 脚本参考上方包含以下脚本参考。

知道为什么这不起作用吗？

Answer 1

Breeze 的 Angular 支持利用了“backingStoreAdapter”，而后者又依赖于浏览器实现的 ES5 Javascript 的“defineProperty”方法。这在 IE8 中没有实现，不幸的是，不能通过使用 shim 来补充。

这是唯一有此限制的适配器，微风淘汰赛和骨干适配器，都可以在 IE8 上使用 ES5 垫片。

对不起！

Answer 2

在 Breeze 的未来版本中，它也不会在 IE8 上工作。

Todo-Angular 在现代浏览器中运行，例如 IE9、IE10 和最近的浏览器 Chrome、Safari、Firefox 和 WebKit 浏览器。微风不支持 在缺少 ECMAScript 5 的旧浏览器中运行的 AngularJS 应用程序 属性获取器和设置器。

Answer 3

Breeze 使用托管 MVVM 框架的 ViewModel。这通常是一个不错的决定。此外，对实体的更改跟踪是微风.js 的一个基本概念（对于实体框架也是如此）。如果 MVVM 框架使用带有真正 getter 和 setter 的 Observables（例如 Knockout），跟踪更改是一件容易的事。另一方面，AngularJS 与普通的 JavaScript 对象一起工作。这使得变更跟踪变得困难。唯一可靠的两种方法是 ES5 属性（简单，但 IE8 不支持）或在 $digest 循环中非常深入的集成。微风团队选择了第一选择——对于必须支持 IE8 的项目来说真是太可惜了！

好的，我们来分析一下问题的根源：变更跟踪

你真的需要那个功能吗？至少在我们的项目中，我们决定使用breeze.js/OData 进行阅读，并在编写时采用更“宁静”的方法。如果您不需要这些高级功能，那么以下脚本应该可以解决问题：

/********************************************************
 * A replacement for the "backingStore" modelLibrary
 * 
 * This is a bare version of the original backingStore,
 * without ANY change tracking - that's why it will work in IE8!
 * (Object.defineProperty not required any more)
 *
 * This adapter is a "drop in" replacement for the "backingStore" adapter in Breeze core.
 * It has the same adapter name so it will silently replace the original "backingStore" adapter
 * when you load this script AFTER the breeze library.
 * WARNING: For obvious reasons a lot of breeze magic will be lost!
 *
 * Author: Johannes Hoppe / haushoppe-its.de
 *
 * Copyright 2014 IdeaBlade, Inc.  All Rights Reserved.  
 * Use, reproduction, distribution, and modification of this code is subject to the terms and 
 * conditions of the IdeaBlade Breeze license, available at http://www.breezejs.com/license
 ******************************************************/

(function (definition, window) {
    if (window.breeze) {
        definition(window.breeze);
    } else if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        // CommonJS or Node
        var b = require('breeze');
        definition(b);
    } else if (typeof define === "function" && define["amd"] && !window.breeze) {
        // Requirejs / AMD 
        define(['breeze'], definition);
    } else {
        throw new Error("Can't find breeze");
    }
}(function (breeze) {
    "use strict";

    var core = breeze.core;

    var ctor = function () {
        this.name = "backingStore";
        this.A_BIG_FAT_WARNING = "This is a bare version of the backingStore! Change tracking won't work!";
    };

    var protoFn = ctor.prototype;

    protoFn.initialize = function() {

    };

    protoFn.getTrackablePropertyNames = function (entity) {
        var names = [];
        for (var p in entity) {
            if (p === "entityType") continue;
            if (p === "_$typeName") continue;

            var val = entity[p];
            if (!core.isFunction(val)) {
                names.push(p);
            }
        }
        return names;
    };

    protoFn.initializeEntityPrototype = function (proto) {

        proto.getProperty = function (propertyName) {
            return this[propertyName];
        };

        proto.setProperty = function (propertyName, value) {
            this[propertyName] = value;
            return this;
        };
    };

    // This method is called when an EntityAspect is first created - this will occur as part of the entityType.createEntity call.
    // which can be called either directly or via standard query materialization
    // entity is either an entity or a complexObject
    protoFn.startTracking = function (entity, proto) {

        // assign default values to the entity
        var stype = entity.entityType || entity.complexType;
        stype.getProperties().forEach(function (prop) {

            var propName = prop.name;
            var val = entity[propName];

            if (prop.isDataProperty) {
                if (prop.isComplexProperty) {
                    if (prop.isScalar) {
                        val = prop.dataType._createInstanceCore(entity, prop);
                    } else {
                        val = breeze.makeComplexArray([], entity, prop);
                    }
                } else if (!prop.isScalar) {
                    val = breeze.makePrimitiveArray([], entity, prop);
                } else if (val === undefined) {
                    val = prop.defaultValue;
                }

            } else if (prop.isNavigationProperty) {
                if (val !== undefined) {
                    throw new Error("Cannot assign a navigation property in an entity ctor.: " + prop.Name);
                }
                if (prop.isScalar) {
                    // TODO: change this to nullstob later.
                    val = null;
                } else {
                    val = breeze.makeRelationArray([], entity, prop);
                }
            } else {
                throw new Error("unknown property: " + propName);
            }
            entity[propName] = val;
        });
    };

    breeze.config.registerAdapter("modelLibrary", ctor);
}, this));

下载地址：https://gist.github.com/JohannesHoppe/72d7916aeb08897bd256

这是原始 backingStore 的裸版，没有任何更改跟踪 - 这就是它可以在 IE8 中工作的原因！ （不再需要 Object.defineProperty）此适配器是 Breeze 核心中“backingStore”适配器的“插入式”替代品。它具有相同的适配器名称，因此当您在微风库之后加载脚本时，它将默默地替换原始的“backingStore”适配器。

这是一个演示功能的演示：
http://jsfiddle.net/Johannes_Hoppe/bcav9hzL/5/

JsFiddle不支持IE8，请直接使用这个链接：
http://jsfiddle.net/Johannes_Hoppe/bcav9hzL/5/embedded/result/

干杯！