请问 avalon 1.5.8 组件 $template 里能否使用三元表达式？

Question

• 使用 avalon.mobile.js 1.5.8

• 想用组件动态添加数据，需要用判断参数el.oper_status, 如ms-visible={{el.oper_status === 'ADD'}}，但是一直报错Uncaught SyntaxError: Unexpected identifier

• ms-class 里使用三元表达式也不成功 ms-class={{el.oper_status === 'ADD' ? 'add-num' : ''}}

• 插值表达式也不可以用三元表达式<span class="symbol">{{el.oper_status === 'ADD' ? '+' : '-'}}</span>

• 具体代码如下，是我想实现的效果，跑不起来。。请问这种情况应该如何写呢？

• html

  <ms:div></ms:div>

• js

  
  function addPageVm(i) {
  $.component("ms:div", {
      list: i.list,
      $ready: function() {
          console.log("构建完成")
      },
      time: function (index) {
          var time = new Date(i.list[index].created_at/1000),
              Y = time.getFullYear() + '-',
              M = (time.getMonth()+1 < 10 ? '0'+(time.getMonth()+1) : time.getMonth()+1) + '-',
              D = time.getDate() + ' ',
              h = time.getHours() + ':',
              m = time.getMinutes() + ':',
              s = time.getSeconds();
          return Y+M+D+h+m+s
      },
      $template: '<div class="single" ms-repeat="list" ms-visible={{el.oper_status === 'ADD'}}>' +
      '<p class="head">{{el.description}}</p>' +
      '<p class="detail" ms-text="time($index)"></p>' +
      '<div class="sub-num" ms-class={{el.oper_status === 'ADD' ? 'add-num' : ''}}>' +
      '<span class="symbol">{{el.oper_status === 'ADD' ? '+' : '-'}}</span>' +
      '<span>{{el.oper_point}}</span></div><ms:text /></div>'
  });
  $.scan();
  }
  

Answer 1

在 Github 上骚扰了大神，但是发现不是 avalon 的问题，(°ー°〃) 应该是语法问题，$template 里没法直接用字符串和 : 符号，把要用的字符串先定义一下就能用了哦！

function addPageVm(i) {
                $.component("ms:div", {
                    $replace: 1,
                    $ready: function() {
                        console.log("构建完成")
                    },
                    add: "ADD",
                    addSign: '+',
                    minusSign: '-',
                    time: function (index) {
                        var time = new Date(i.data.list[index].created_at/1000),
                            Y = time.getFullYear() + '-',
                            M = (time.getMonth()+1 < 10 ? '0'+(time.getMonth()+1) : time.getMonth()+1) + '-',
                            D = time.getDate() + ' ',
                            h = time.getHours() + ':',
                            m = time.getMinutes() + ':',
                            s = time.getSeconds();
                        return Y+M+D+h+m+s
                    },
                    $template: '<div class="single" ms-repeat="list" ms-visible="el.oper_status === add">' +
                '<p class="head">{{el.description}}</p>' +
                '<p class="detail" ms-text="time($index)"></p>' +
                '<div ms-if="el.oper_status === add" class="sub-num add-num" >' +
                '<span class="symbol">{{el.oper_status === add ? addSign : minusSign}} </span>' +
                '<span>{{el.oper_point}}</span></div>' +
                '<div ms-if="el.oper_status !== add" class="sub-num" >' +
                '<span class="symbol">{{el.oper_status !== add ? addSign : minusSign}} </span>' +
                '<span>{{el.oper_point}}</span></div>' +
                '<ms:text /></div>'
                });
                $.scan();
            }