zoukankan      html  css  js  c++  java
  • 原创:Angular + controllerAs + CoffeeScript的一个问题,及其解决方案

    config是一个待注入的value,它的值是{count:  1}

    看代码(用普通函数的写法):

    $routeProvider.when '/test', 
      template: "Hello{{vm.abc()}}" 
      controllerAs: "vm" 
      controller: (config) -> 
        @abc = –>
          return config.count
        @test = { 
          api: config.count 
        }
    

    这段代码工作不正常:vm.test.api什么也没有,事实上,vm的值是{count: 1},而我们期望的值是{test: {count: 1}}。原因何在?因为每个controller都会被new出来,而这个controller定义的代码相当于:

    function SomeNameCtrl(config) {
      this.abc = function() {
        return config.count;
      }
      this.test = {
        api: config.count;
      }
      return this.test;  // 注意这句!
    }

    注意最后这个return!它是coffee的一个特性:自动返回最后一个语句的结果。

    有人喜欢这种语法特性,但是对我来说,特别是在这种场景下,它太讨厌了。

    如何改正这个问题呢?

    一个很简单的写法是手动加上一个return语句:

    $routeProvider.when '/test', 
      template: "Hello{{vm.abc()}}" 
      controllerAs: "vm" 
      controller: (config) -> 
        @abc = –>
          return config.count
        @test = { 
          api: config.count 
        }
        return @

    这种写法确实能解决问题,而且没有bug,不过……这种写法好丑啊。后来@破狼提出了一个更简单的解决办法,那就是用coffee的class语法,代码如下:

    $routeProvider.when '/test', 
      template: "Hello{{vm.abc()}}" 
      controllerAs: "vm" 
      controller: class TestCtrl 
        constructor: (@config) -> 
          @test = { 
            api: config.root 
          } 
        abc: -> 
          return @config.root

    很漂亮的解决方案,再也不用担心忘记什么语句了!我们用Coffee类代替了以前版本的普通函数,而这,也正是new操作符所希望得到的。

    在概念层面上,controller也确实应该是个类,除此之外,service也是类的概念。

    所以,这个问题的本质在于我们用一个普通函数的形式定义了一个Coffee类,而这导致了第一组代码的奇怪bug。

    不过,上面这段代码还有一个问题:无法被正常的minify,这个问题的解决和传统的方式很相似,代码如下:

    $routeProvider.when '/test', 
      template: "Hello{{vm.abc()}}" 
      controllerAs: "vm" 
      controller: ['config', class TestCtrl 
        constructor: (@config) -> 
          @test = { 
            api: config.root 
          } 
        abc: -> 
          return @config.root
     ]
  • 相关阅读:
    (翻译)Entity Framework技巧系列之九 Tip 35 36
    (翻译)Entity Framework技巧系列之十 Tip 37 41
    (翻译)Entity Framework技巧系列之一 Tip 1 5
    (翻译)Entity Framework技巧系列之五 Tip 16 – 19
    [翻译]C#数据结构与算法 – 第五章栈与队列(Part 1)
    [翻译]C#数据结构与算法 – 第六章BitArray类
    (翻译)Entity Framework技巧系列之七 Tip 26 – 28
    (翻译)Entity Framework技巧系列之四 Tip 13 – 15
    (翻译)Entity Framework技巧系列之二 Tip 6 8
    使用YCSB测试mongodb
  • 原文地址:https://www.cnblogs.com/asnowwolf/p/3675380.html
Copyright © 2011-2022 走看看