减少代码的使用Handlebars.js

Question

的

我开始使用把手和架构模式模型 - 视图 - 视图模型和我写了这个代码：

var data = { 
     currentPlayer: this._model.currentPlayer, 
     line: [ 
      { 
       row: 
       [ 
        { 
         caseNumber:1, 
         caseValue: this._model.getCaseState(0,0) 
        }, 
        { 
         caseNumber:2, 
         caseValue: this._model.getCaseState(0,1) 
        }, 
        { 
         caseNumber:3, 
         caseValue: this._model.getCaseState(0,2) 
        } 
       ] 
      }, 
      { 
       row:[ 
        { 
         caseNumber:4, 
         caseValue:this._model.getCaseState(1,0) 
        }, 
        { 
         caseNumber:5, 
         caseValue:this._model.getCaseState(1,1) 
        }, 
        { 
         caseNumber:6, 
         caseValue:this._model.getCaseState(1,2) 
        } 
       ] 
      }, 
      { 
       row:[ 
        { 
         caseNumber:7, 
         caseValue:this._model.getCaseState(2,0) 
        }, 
        { 
         caseNumber:8, 
         caseValue:this._model.getCaseState(2,1) 
        }, 
        { 
         caseNumber:9, 
         caseValue: this._model.getCaseState(2,2) 
        } 
       ] 
      } 
     ] 
    }; 
    var htmlContent = this._template(data); 
    this._element.html(htmlContent); 

用下面的模板：

<div> 
    <h3>It is to player {{currentPlayer}}</h3> 
    <table> 
     {{#each line}} 
     <tr> 
      {{#row}} 
      <td data="{{caseNumber}}" class="case{{caseValue}}">{{caseValue}}</td> 
      {{/row}} 
     </tr> 
     {{/each}} 
    </table> 
</div> 

这段代码工作正常，但我问我是否不能减少它。所以我试图在var数据中使用for循环，但我意识到我无法做到这一点。 我的另一个选择就是在这样的模板，如果使用：通过测试VAR caseValue的价值

{{#each line}} 
    <tr> 
     {{#row}} 
     {{#if caseValue}} 
     <td data="{{caseNumber}}" class="case{{caseValue}}">O</td> 
     {{else}} 
     <td data="{{caseNumber}}" class="case{{caseValue}}">X</td> 
     {{/if}} 
     {{/row}} 
    </tr> 
{{/each}} 

。但是，由于caseValue取值为1或0或undefined，如果未检查大小写，则所有单元格均填充“X”。 因此，我无法找到一个紧凑的解决方案，其目的是：

• 开始时，所有的TD标签都是空的。
• 取决于getCaseState的值，该值返回0或1填充 具有“X”或“O”的单元格。

编辑：我管理的getCaseState不同的值与此代码：

Handlebars.registerHelper('displayTd', function(data) { 
     var result; 
     if(data.caseValue === undefined) { 
      result = '<td data="' + data.caseNumber + '"></td>'; 
      return new Handlebars.SafeString(result); 
     } else if(data.caseValue === 1) { 
      result = '<td data="' + data.caseNumber + '" class="case' + data.caseValue + '">X</td>'; 
      return new Handlebars.SafeString(result); 
     } else { 
      result = '<td data="' + data.caseNumber + '" class="case' + data.caseValue + '">O</td>'; 
      return new Handlebars.SafeString(result); 
     } 
    }); 

Answer 1

我会采取降低代码的第一步是你提到的有关使用循环来构建你的数据之一。在line对象中的数据遵循一个简单的模式，所以我们可以用下面的代码构造：

var numRows = 3; 
var numColumns = 3; 
var line = []; 

for (var rowIndex = 0; rowIndex < numRows; rowIndex++) { 
    line[rowIndex] = { row: [] }; 
    for (var columnIndex = 0; columnIndex < numColumns; columnIndex++) { 
     line[rowIndex].row[columnIndex] = { 
      caseNumber: ((rowIndex * numColumns) + columnIndex + 1), 
      caseValue: getCaseState(rowIndex, columnIndex) 
     }; 
    } 
} 

*请注意，您必须调用getCaseState现有的模型对象。然后

我们data对象变为：

var data = { 
    currentPlayer: this._model.currentPlayer, 
    line: line 
}; 

至于你的模板内有条件，我会建议创建自己的车把帮手。幸运的是，把手具有用于返回true一个isEmpty实用方法：

• 阵列长度为0
• falsy值0以外

这意味着我们可以使用该工具的方法检查我们的caseValue是否为undefined：

Handlebars.registerHelper('getCharacter', function (caseValue) { 
    return Handlebars.Utils.isEmpty(caseValue) ? '' : (caseValue === 0 ? 'X' : 'O'); 
}); 

然后，我们用我们的新助手在我们的模板以下列方式：

{{#each row}} 
    <td data="{{caseNumber}}" class="case{{caseValue}}">{{getCharacter caseValue}}</td> 
{{/each}}