javascript - 剣道ドロップダウンリストからアンダースコアを削除

Question

これは単純に見えますが、どこで処理すればよいかわかりません。REST JSON を介して SQL データベースから列名の値を取得しています。ドロップダウン リストの値には、予想どおりアンダースコアが含まれています (Customer_Name)。アンダースコアなしで "わかりやすい" (Customer Name) バージョンを表示したいのですが、値 (Customer_Name) を REST サービスに送信したままです。Underscore.js を見ましたが、どこから始めればよいかわかりません。これは思ったよりも簡単かもしれません。ありがとう！

Answer 1

残りのサービスからデータを受け取る方法がわかりません。

ただし、基本的には、REST サービスが受け取ったデータをマッピングし、必要に応じて値を変更するだけです。

サンプルコードは次のとおりです。

// Call to the REST service and when done call the callback function loadDDL
$.ajax({
  type: "POST",
  url: "my-rest-service"
}).done(loadDDL);


// Callback function when returning from the REST service
// -> load data in the DDL (here, it has the id "my-ddl")
function loadDDL(data) { 
  $("#my-ddl").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: _.map(data, makeFriendlyName),
    index: 0
  }); 
}


// Function used by the _.map function in order 
// change dynamically the labels in the DDL
function makeFriendlyName(obj) {
  return { 
    text: obj.text, 
    value: obj.value.replace("_", " ") 
  };
}

---

編集 ：

OPのフィドルに基づいて、データソースを直接変更する代わりにテンプレートを使用したサンプルコードを次に示します:

function loadDDL(data) { 
  $("#my-ddl").kendoDropDownList({
    autoBind: true,
    dataTextField: "DOMAINQUERY",
    dataValueField: "COLUMN_NAME",
    dataSource: dataSourceSearch1,
    template: "${DOMAINQUERY.replace(/_/g, ' ')}"
  }); 
}

---

編集2：

changeデータソースを直接変換するために、データソースのイベントでテキストを動的に変更して、データソースを再マッピングします。

var dataSourceSearch1 = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Customers",
            dataType: "jsonp"
        }
    },
    change: changeDS // <-- Here add a change event : each time the datasource changes, this event is being raised
});


// This is the function call when the DS changes
// the data stuff is in the `items` property which is the object send via the REST service
function changeDS(datasource) {
    _.map(datasource.items, makeFriendlyName);
}


// Function to apply to each data -> here I just replace all spaces in the 
// `ContactName` field by `_`
function makeFriendlyName(data) {
    data.ContactName = data.ContactName.replace(/ /g, '_');
    return data;
}


// Fill the DDL with the previous datasource
var cboSearchField1 = $("#cboSearchField1").kendoDropDownList({
    dataTextField: "ContactName",
    dataValueField: "ContactName",
    filter: "contains",
    autobind: true,
    select: cboSearchField1_Selected,
    change: cboSearchField1_onChange,
    dataSource: dataSourceSearch1
}).data("kendoDropDownList");