2016-06-10 51 views
1

我在我的一個頁面上使用帶有Kendo MultiSelect的MVVM模式。我遇到的問題是將項目添加到MultiSelect數據源。在MVVM綁定後添加到Kendo MultiSelect

中的JavaScript,我有:

var viewModel = kendo.observable({ 
    productHandlingDataSource: new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "/Helper/GetProductHandlingTypes", 
       dataType: "json", 
       type: "GET" 
      } 
     } 
    }) 
}); 

kendo.bind($("#buyer-profile-register"), viewModel); 

在我的視圖選擇標籤:

<select data-role="multiselect" 
    data-placeholder="Select Type(s):" 
    data-text-field="Name" 
    data-value-field="Id" 
    data-bind="source: productHandlingDataSource" 
    style="width: 100%;"> 
</select> 

我已經嘗試只是在做標準viewModel.productHandlingDataSource.add({ Name: "Other" })但是當我加載頁面尚未添加到MultiSelect。

我在這裏失蹤或做錯了什麼?

+0

你能提供'select'標籤? – Win

+0

@Win剛將它添加到帖子 – Quiver

回答

1

我在上面的代碼中沒有看到任何錯誤。你能確保API返回有效數據嗎?

https://plnkr.co/edit/zgu5ADxhlk5Tbq6B8XXM

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="buyer-profile-register"> 
 
    <h4>MultiSelect</h4> 
 
    <select data-role="multiselect" 
 
      data-placeholder="Select Type(s):" 
 
      data-text-field="ProductName" 
 
      data-value-field="ProductID" 
 
      data-bind="source: productHandlingDataSource" 
 
      ></select> 
 
      
 
<script> 
 
    var viewModel = kendo.observable({ 
 
     productHandlingDataSource: new kendo.data.DataSource({ 
 
      transport: { 
 
       read: { 
 
        url: "//demos.telerik.com/kendo-ui/service/products", 
 
        dataType: "jsonp" 
 
       } 
 
      } 
 
     }) 
 
    }); 
 
    kendo.bind($("#buyer-profile-register"), viewModel); 
 
</script> 
 
</div> 
 

 

 
</body> 
 
</html>

+0

是的所有的數據都被正確地返回。 Multiselect填充了所有返回的項目。但我的問題是向數據源中添加另一個項目,該數據源通常不包含所有其他數據。因此,多選可能會有三個項目,名稱爲:項目1,項目2,項目3.並且我想添加另一個項目,名稱爲「其他」。對不起,如果我不清楚自己的解釋。 – Quiver