Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The "with" binding of KnockoutJS in AngularJS?

I have just switched from KnockoutJS to AngularJS and I am not able to find the KnockoutJS's "with" data-bind in AngularJS.

Here is the piece of code in KnockoutJS. The "with" binding creates a new binding context, so that descendant elements are bound in the context of a specified object.

<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>

Does AngularJS have anything like context?

like image 612
Sanket Sahu Avatar asked Jun 25 '13 14:06

Sanket Sahu


People also ask

What is binding in knockout JS?

A binding context is an object that holds data that you can reference from your bindings. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts. The root level of the hierarchy refers to the viewModel parameter you supplied to ko. applyBindings(viewModel) .

What is two-way binding in knockout JS?

KO is able to create a two-way binding if you use value to link a form element to an Observable property, so that the changes between them are exchanged among them. If you refer a simple property on ViewModel, KO will set the form element's initial state to property value.

How do you activate a KnockoutJS model?

To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.


2 Answers

Nothing like with that I know of.. this is the best I could do:

<h1>{{city}}</h1>
<p ng-repeat="c in [coords.or.possibly.deeper.in.tree]">
    Latitude: {{c.latitude}},
    Longitude: {{c.longitude}}
</p>
like image 92
Karen Zilles Avatar answered Nov 14 '22 04:11

Karen Zilles


Create a custom directive that loops through the source object and creates corresponding properties on the directive's scope that are getter/setter references to the source object.

Check out this plunker.

directive module:

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
    };
  });

app module:

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>

Explanation

In KnockoutJS, bindings keep the bindingContext and data separated so creating the with binding is trivial since it only needs to create a new child bindingContext from the current one and use the with object as its data value.

In AngularJS, a directive's scope is basically the bindingContext and data object rolled into one. When a new scope is created, in order to get the with-like behavior, the properties of the with object have to be referenced onto the newly created scope object.

like image 20
nwayve Avatar answered Nov 14 '22 04:11

nwayve