減少代碼的使用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}}