2016-06-10 48 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