feat(kendo.View): Add support for useWithBlock

Author: Kaloyan Pavlov

docs/api/javascript/view.md

@@ -25,6 +25,22 @@ If set to `true`, the view template will be treated as kendo template and evalua
      view.render($("#app"));
     </script>
 
+### useWithBlock `Boolean`*(default: true)*
+
+If set to `false` and evalTemplate is set to `true`, the kendo template will be evaluated without using a `with` block.
+
+#### Example
+
+    <div id="app"></div>
+    <script id="foo-template" type="text/x-kendo-template">
+        <span>#: data.foo #</span> <!-- "data." is required as there is no with block -->
+    </script>
+    <script>
+     var foo = { foo: "foo" }
+     var view = new kendo.View('foo-template', { model: foo, evalTemplate: true });
+     view.render($("#app"));
+    </script>
+
 ### model `ObservableObject`*(default: null)*
 
 The MVVM model to bind the element to.

src/kendo.view.js

@@ -75,6 +75,7 @@ var __meta__ = { // jshint ignore:line
             that.model = options.model;
             that._wrap = options.wrap !== false;
             this._evalTemplate = options.evalTemplate || false;
+            this._useWithBlock = options.useWithBlock;
             that._fragments = {};
 
             that.bind([ INIT, SHOW, HIDE, TRANSITION_START, TRANSITION_END ], options);
@@ -213,11 +214,11 @@ var __meta__ = { // jshint ignore:line
                     content = that.content;
                 }
             }
-
+            
             if (typeof content === "string") {
                 content = content.replace(/^\s+|\s+$/g, '');
                 if (that._evalTemplate) {
-                    content = kendo.template(content)(that.model || {});
+                    content = kendo.template(content, { useWithBlock: that._useWithBlock })(that.model || {});
                 }
 
                 element = $(wrapper).append(content);
@@ -232,7 +233,7 @@ var __meta__ = { // jshint ignore:line
             } else {
                 element = content;
                 if (that._evalTemplate) {
-                    var result = $(kendo.template($("<div />").append(element.clone(true)).html())(that.model || {}));
+                    var result = $(kendo.template($("<div />").append(element.clone(true)).html(), { useWithBlock: that._useWithBlock })(that.model || {}));
 
                     // template uses DOM
                     if ($.contains(document, element[0])) {

tests/view/view.js

@@ -101,6 +101,29 @@
             assert.equal(Mocha.fixture.find("#foo").html(), "foo");
         });
 
+        it("evaluates template without with block when useWithBlock is false", function() {
+            var view = new kendo.View("<div>#: data.foo.bar #</div>", { model: { foo: { bar: "bar" } }, evalTemplate: true, useWithBlock: false });
+            assert.equal(view.render().html(), "<div>bar</div>");
+        });
+
+        it("fails to evaluate template without with block when useWithBlock is false and the template refers to the properties of data directly", function() {
+            var view = new kendo.View("<div>#: foo.bar #</div>",  { model: { foo: { bar: "bar" } }, evalTemplate: true, useWithBlock: false });
+            assert.throws(() => view.render());
+        });
+
+        it("evaluates template with an element in the dom without with block when useWithBlock is false", function() {
+            Mocha.fixture.append("<div id=fooSuccess>#: data.foo.bar #</div>")
+            var view = new kendo.View("#fooSuccess", { model: { foo: { bar: "bar" } }, evalTemplate: true, useWithBlock: false });
+            view.render();
+            assert.equal(Mocha.fixture.find("#fooSuccess").html(), "bar");
+        });
+
+        it("fails to evaluate template with an element in the dom without with block when useWithBlock is false and the template refers to the properties of data directly", function() {
+            Mocha.fixture.append("<div id=fooFailure>#: foo.bar #</div>")
+            var view = new kendo.View("#fooFailure",  { model: { foo: { bar: "bar" } }, evalTemplate: true, useWithBlock: false });
+            assert.throws(() => view.render());
+        });
+
         it("can skip wrapping", function() {
             var view = new kendo.View("<span id='foo'>Foo</span>", { wrap: false });
 

typescript/kendo.all.d.ts

@@ -345,6 +345,7 @@ declare namespace kendo {
         wrap?: boolean;
         model?: Object;
         evalTemplate?: boolean;
+        useWithBlock?: boolean;
         init?: (e: ViewEvent) => void;
         show?: (e: ViewEvent) => void;
         hide?: (e: ViewEvent) => void;