用ES5写Angular v2（２）中的“双向绑定”

2 年 ago
韵, 科
1 minute

※现在不建议使用这种方法

上次我用ES5写了一个简单的Angular v2示例程序。

让我们来试试AngularJS的特点之一：”双向绑定”。

主要的HTML与上次相比几乎没有变化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.dev.js"></script>
        <script src="components/hello-component/hello-component.js"></script>
    </head>
    <body>
        <hello-component></hello-component>
    </body>
</html>
undefined

由于本次不会使用app.js，所以即使为空也没有问题。

'use strict';
(function() {
})();

首先从JavaScript开始。由于在模板中直接编写会使代码变得混乱，所以我们使用templateUrl。

(function(app) {
    app.HelloComponent = ng.core
    .Component({
        selector: 'hello-component'
    })
    .View({
        templateUrl: 'components/hello-component/hello-component.template.html'
    })
    .Class({
        constructor: function() {
            this.name = 'world';
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(app.HelloComponent);
    });
})(window.app || (window.app = {}));

HTML模板的内容如下所示。

<p>Hello, {{name}} !</p>
<input type="text" [(ngModel)]="name" />

在Angular v2中，当写上[(ngModel)]=”变量名”时，关联的变量（本例中为this.name）将实现双向绑定。

顺便说一句，使用[ngModel]=”变量名”这样的写法会使其成为单向绑定，input的初始值会被传递，但如果输入文字后不会在屏幕上显示出来。

这次的示例也在Codepen上公开了。

总之

使用Angular v2的语法，可以实现双向绑定。与v1.x版本相比，它的写法非常独特，所以刚开始可能会感到困惑，但是要努力适应下去。下一次我们将进行循环处理。

bannerAds