サンプルの「Breeze 0.83.5」アプリケーションをhttp://www.breezejs.com/documentation/downloadからダウンロードしました。
Angular の「ToDo」サンプルは IE8 では機能しません。
Breeze スクリプト リファレンスの上に、次のスクリプト リファレンスを含めました。
なぜこれがうまくいかないのですか?
サンプルの「Breeze 0.83.5」アプリケーションをhttp://www.breezejs.com/documentation/downloadからダウンロードしました。
Angular の「ToDo」サンプルは IE8 では機能しません。
Breeze スクリプト リファレンスの上に、次のスクリプト リファレンスを含めました。
なぜこれがうまくいかないのですか?
Breeze の Angular サポートは、ブラウザによって実装されている ES5 Javascript の「defineProperty」メソッドに依存する「backingStoreAdapter」を利用します。これは IE8 では実装されておらず、残念ながら shim を使用して補足することはできません。
これは、この制限がある唯一のアダプターであり、ブリーズ ノックアウト アダプターとバックボーン アダプターの両方が、ES5 shim を使用して IE8 で動作します。
ごめん!
Breeze は、ホスティング MVVM フレームワークの ViewModel を使用します。それは一般的に良い決断です。さらに、エンティティの変更追跡は、breast.js の基本的な概念です (Entity Framework も同様です)。MVVM フレームワークが実際のゲッターとセッター (Knockout など) で Observables を使用する場合、変更を追跡するのは簡単なタスクです。一方、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/
乾杯!