使用鍵值對中的方法來截斷字符串

Question

我在我的JavaScript中使用Lodash和jQuery庫，我想弄清楚如何調用一個方法來允許我截斷鍵值的結果用於在我的.html代碼中創建一個列表。該html看起來如下：

<div class="slide-in-panel"> 
     <ul class="list-unstyled slide-in-menu-navigation" data-bind="foreach: __plugins"> 
      <li class="btn-block"> 
       <div class="btn btn-default btn-block" data-bind="click: $parent.showPlugin, tooltip: 'Shoebox.Panel'"> 
        <span data-bind="text: config.title"></span> 
        <em class="webgis-Icon webgis-Cross slide-in-menu-remove-shoebox-button" 
         data-bind="click: $parent.showRemoveConfirmBox, tooltip: 'Shoebox.RemoveShoebox'"> 
        </em> 
       </div> 
      </li> 
     </ul> 
</div> 

關鍵組件是data-bind="text: config.title"部分。這會爲該按鈕的名稱填充列表。 config.title是在下面的JavaScript文件中創建的。我的目標是將一個方法（如.truncate()）應用於JavaScript中的config.title部分，以保持填充的名稱從長到短。我將如何做到這一點？

return this.__backendShoeboxClient.createShoebox(this.__shoeboxName()).then((function(_this) { 
     return function(shoebox) { 
     return $when.join(shoebox.getName(), shoebox.getId(), shoebox.getUserName()).then(function(arg) { 
      var shoeboxId, shoeboxName, userName; 
      shoeboxName = arg[0], shoeboxId = arg[1], userName = arg[2]; 
      return _this.__shoeboxContentFactory.create({ 
      shoeboxId: shoeboxId, 
      shoeboxName: shoeboxName, 
      userName: userName 
      }).then(function(arg1) { 
      var activeShoeboxHandle, config, shoeboxContent; 
      shoeboxContent = arg1.shoeboxContent, activeShoeboxHandle = arg1.activeShoeboxHandle; 
      _this.__activeShoeboxHandleMain.loadModel(activeShoeboxHandle); 
      config = { 
       plugin: shoeboxContent, 
       title: shoeboxName, 
       userName: userName, 
       id: shoeboxId, 
       handle: activeShoeboxHandle, 
       icon: "" 
      }; 
      _this.add(config, null, null); 
      activeShoeboxHandle.loadModel(shoebox); 
      _this.__shoeboxName.useDefaultValue(); 
      return _this.__shoeboxName.clearError(); 
      }); 
     })["catch"](function(error) { 
      __logger__.error("Error while calling request " + error); 
      return $when.reject(new Error("Error while calling request. " + error)); 
     }); 
     }; 
    })(this)); 
    }; 

我也試圖用這樣的結合淘汰賽style，但沒有成功：

<span data-bind="style: { textOverflow: ellipsis }, text: config.title"></span> 

Answer 1

因此，爲了建立起見，我能夠在簡單的if語句中使用substring方法找到解決這個問題的方法。這個問題似乎是因爲我把它放在我的代碼的錯誤部分，所以我想澄清一下爲未來的讀者工作。我能夠在key：value對內應用以下內容並且它完全工作：

config = 
    plugin: shoeboxContent 
    title: if name.length > 24 
     "#{name.substring 0, 24}..." 
    else 
     name 

    userName: shoebox.getUserName() 
    id: shoebox.getId() 
    handle: activeShoeboxHandle 
    icon: "" 

@add config, null, null 

Answer 2

這應做到： 使用截斷功能是這樣的：config.title = _ .truncate（config.title，{'length'：maxLength}）;

return this.__backendShoeboxClient.createShoebox(this.__shoeboxName()).then((function(_this) { 
    return function(shoebox) { 
    return $when.join(shoebox.getName(), shoebox.getId(), shoebox.getUserName()).then(function(arg) { 
     var shoeboxId, shoeboxName, userName; 
     shoeboxName = arg[0], shoeboxId = arg[1], userName = arg[2]; 
     return _this.__shoeboxContentFactory.create({ 
     shoeboxId: shoeboxId, 
     shoeboxName: shoeboxName, 
     userName: userName 
     }).then(function(arg1) { 
     var activeShoeboxHandle, config, shoeboxContent; 
     shoeboxContent = arg1.shoeboxContent, activeShoeboxHandle = arg1.activeShoeboxHandle; 
     _this.__activeShoeboxHandleMain.loadModel(activeShoeboxHandle); 
     config = { 
      plugin: shoeboxContent, 
      title: shoeboxName, 
      userName: userName, 
      id: shoeboxId, 
      handle: activeShoeboxHandle, 
      icon: "" 
     }; 
     config.title = _.truncate(config.title, {'length': 15}); 
     _this.add(config, null, null); 
     activeShoeboxHandle.loadModel(shoebox); 
     _this.__shoeboxName.useDefaultValue(); 
     return _this.__shoeboxName.clearError(); 
     }); 
    })["catch"](function(error) { 
     __logger__.error("Error while calling request " + error); 
     return $when.reject(new Error("Error while calling request. " + error)); 
    }); 
    }; 
})(this)); 

};