Question

我在Cordova应用程序中使用以下代码进行虚拟DOM元素数据绑定。此代码适用于IE 11，Android和iOS，但不适用于Windows 8.1 Cordova App

如果我使用常规DOM元素绑定，它也适用于Windows。但我的要求是使用Virtual DOM Element Binding。

任何形式的帮助都将受到赞赏。

<html>
<head>
    <meta charset="utf-8" />
    <title>Prooduct</title>

    <link href="css/index.css" rel="stylesheet" />
    <script src="libs/knockout/knockout.js"></script>

    <script type="text/html" id="product-template">

    <ul>
        <!-- ko foreach: productArray-->
        <li><span data-bind="text: productName"></span><br /></li>
        <!-- /ko -->
    </ul>

    </script>
</head>
<body>

    <h4>Product List</h4>

    <div data-bind="template: { name: 'product-template'}"></div>

    <script type="text/javascript">
        function ProductViewModel() {
            this.productArray = ko.observableArray([
               { productName: 'Milk' },
               { productName: 'Oil' },
               { productName: 'Butter' }]);
        }
        ko.applyBindings(new ProductViewModel());
    </script>
</body>
</html>

Answer 1

我使用cordova CLI 4.3.1 / Visual Studio 2015 / Windows 10和Windows 8.1（远程调试）成功测试了它：

index.js：

// and then run "window.location.reload()" in the JavaScript Console.
$(document).ready(function () {

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.

    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };

    function AppViewModel() {
        var self = this;
        self.productArray = ko.observableArray([
        { productName: 'Milk' },
        { productName: 'Oil' },
        { productName: 'Butter' }]);

        self.removeProduct = function () {
            self.productArray.remove(this);
        }
    };
    var vm = new AppViewModel();
    ko.applyBindings(vm);
});

的index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>testios</title>

    <!-- testios references -->
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <h2>List of product</h2>
    <hr />
    <ul>
        <!-- ko foreach: productArray -->
        <li>
            <span data-bind="text: productName"></span>  <a href="#" data-bind="click: $parent.removeProduct">Remove </a>
        </li>
        <!-- /ko -->
    </ul>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="scripts/jquery-2.1.4.js"></script>
    <script src="scripts/knockout-3.3.0.js"></script>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>
</body>
</html>

初始窗口：

点击Remove Oil：

你使用过最新的淘汰赛 - 3.3.0.js吗？

在我看来，你也可以用没有cordova的IE测试它，因为它是相同的浏览器引擎：

http://jsfiddle.net/k7x7a6q9/

在Windows 10下的IE11和MS Edge 20.10240.16384.0中进行了测试

找到根本原因的一个好方法是查看DOM-Explorer，看看发生了什么。它会在您开始调试时自动打开，或者您可以通过键入＆＃34; DOM＆＃34;来打开它。在Visual Studio右上角的调试期间的“快速启动”字段中：

...并在JavaScript中设置断点，以验证是否抛出了click事件：

Answer 2

上面的代码产生了一个JavaScript错误：＆＃34;未找到productName＆＃34;在Windows 8.1下。我假设它是标题和正文中的脚本块之间的竞争条件。

以下代码不会产生此错误：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>KnockoutTemplate</title>
    <script src="scripts/knockout-3.3.0.js"></script>
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <h4>Product List</h4>
    <div data-bind="template: { name: 'product-template'}"></div>

    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script>

    <script type="text/html" id="product-template">
        <ul>
            <!-- ko foreach: productArray-->
            <li><span data-bind="text: productName"></span><br /></li>
            <!-- /ko -->
        </ul>
    </script>
    <script type="text/javascript">
        function ProductViewModel() {
            this.productArray = ko.observableArray([{
                productName: 'Milk'
            }, {
                productName: 'Oil'
            }, {
                productName: 'Butter'
            }]);
        }
        ko.applyBindings(new ProductViewModel());
    </script>
</body>
</html>

我强烈建议将JavaScript放入外部文件中，就像我在第一个答案中写的那样。

对模板内的虚拟元素进行Knockout JS数据绑定不适用于Windows 8.1 Cordova应用程序

2 个答案: