KnockoutJS +聚合物:绑定中断(Chrome之外)

Question

编辑:这只出现在Chrome之外

我使用KO来填充使用foreach绑定的元素。在硬币的另一边，我已经加载了聚合物，以利用谷歌的材料设计样式。

问题是，似乎有一个断言在平台.js文件(聚合物)，试图接管data-bind，即使聚合物不使用数据绑定属性。

想知道是否有人有使用这两种方法的经验，或者有任何建议?错误如下:

Error: Unable to process binding "template: function (){return { foreach:sessions} }" Message: Assertion failed

JSFiddle: http://jsfiddle.net/Rmp6c/3/

编辑:所以我已经设置了调试版本，似乎在ShadowDOM/src/wrapper .js第31行有一个正在传递布尔值的assert(b)函数。这被Node.js文件调用了100次，要修复这个问题，看起来需要相当大的重写。

我对此的修复是使用jQuery插入DOM元素与foreach绑定，然后在$(document).ready(function() {});标记内应用我的KO绑定。

Answer 1

如果有人有这个问题，那是因为你正在使用ko.applyBindings(viewModel)方法，在这里淘汰使用window.document.body来获得节点，这反过来又错过了webcomponents.js使用的shadowDOM polyfill。

要解决这个问题，你有两个选择，使用apply bindings方法的第二个重载——你可能会得到一个成功包装的节点。

或者，您可以在knockout声明之后立即加载此shim(从knockout.validation:

借鉴的一些样板文件)。

(function (factory) {
    // Module systems magic dance.
    if (typeof require === "function" && typeof module === "object") {
        // CommonJS or Node: hard-coded dependency on "knockout"
        factory(require("knockout"));
    } else if (typeof define === "function" && define["amd"]) {
        // AMD anonymous module with hard-coded dependency on "knockout"
        define(["knockout"], factory);
    } else {
        // <script> tag: use the global `ko` object, attaching a `mapping` property
        factory(ko);
    }
}(function (ko) {
    if (typeof (ko) === undefined) { throw 'Knockout is required, please ensure it is loaded before loading this shim'; }
    if (WebComponents && WebComponents.flags.shadow && ShadowDOMPolyfill) {
        var _originalApplyBindings = ko.applyBindings;
        ko.applyBindings = function (viewModel, rootNode) {
            if (rootNode) {
                rootNode = ShadowDOMPolyfill.wrapIfNeeded(rootNode);
            } else {
                rootNode = ShadowDOMPolyfill.wrapIfNeeded(window.document.body);
            }
            _originalApplyBindings(viewModel, rootNode);
        }
    }
}));

希望这对有同样问题的人有所帮助。

Answer 2

我的解决办法是使用jQuery插入DOM元素与foreach绑定，然后在$(document).ready(function(){})中应用我的KO绑定;标签。这似乎在所有浏览器上都有效。

虽然这不是一个伟大的修复-它是唯一一个工作正常。我已经联系了KnockoutJS的史蒂夫·桑德森，相信他正在调查此事。我选择这个修复方法而不是使用Knockout Custom组件的原因是，Polymer组件根据Google的新设计规范提供了Material Design，并且我正在构建的web前端与我公司的移动应用程序本质上是联系在一起的，所以我想保持一个内聚的设计。