KnockoutJS在AngularJS中如何“结合”?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

我刚刚从KnockoutJS切换到AngularJS,我无法在AngularJS中找到KnockoutJS的“With”数据绑定。

这是KnockoutJS中的代码片段。“WITH”绑定创建一个新的绑定上下文,以便在指定对象的上下文中绑定后代元素。

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
</p>

<script type="text/javascript">
    ko.applyBindings({
        city: "London",
        coords: {
            latitude:  51.5001524,
            longitude: -0.1262362
        }
    });
</script>

AngularJS有类似的上下文吗?

提问于
用户回答回答于
<h1>{{city}}</h1>
<p ng-repeat="c in [coords.or.possibly.deeper.in.tree]">
    Latitude: {{c.latitude}},
    Longitude: {{c.longitude}}
</p>
用户回答回答于

创建一个自定义指令,循环遍历源对象,并在指令的作用域上创建相应的属性,即getter/setter对源对象的引用。

指令模块:

angular.module('koWith', [])
  .directive('koWith', function () {
    return {
      controller: function ($scope, $attrs) {
        var withObj = $scope.$parent[$attrs.ngWith];

        function getter(prop) {
          return this[prop];
        }
        function setter(val, prop) {
          this[prop] = val;
        }

        for (var prop in withObj) {
          if (withObj.hasOwnProperty(prop)) {
            Object.defineProperty($scope, prop, {
              enumerable: true,
              configurable: true,
              get: getter.bind(withObj, prop),
              set: setter.bind(withObj, prop)
            });
          }
        }
      },
      restrict: 'A',
      scope: true
    };
  });

应用程序模块:

angular.module('myApp', [])
  .controller('myController', function ($scope) {
    $scope.customer = {
      name: "Timmeh",
      address: {
        address1: "12 S Street",
        address2: "",
        city: "South Park",
        state: "CO",
        zipCode: "80440"
      }
    };
  });

HTML:

<div ko-with="customer">
  <h2>{{name}}</h2>
  <div ko-with="address">
    {{address1}}<br>
    {{address2}}<br>
    {{city}}, {{state}} {{zipCode}}
  </div>
</div>

解释

在KnockoutJS中,绑定将bindingContext和数据分隔开,从而创建with绑定很简单,因为它只需要从当前绑定创建一个新的子bindingContext,并使用with对象作为其数据值。

在AngularJS中,指令的作用域基本上是将bindingContext和数据对象合并为一个。with-类似于行为,with对象必须引用到新创建的范围对象上。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动