淘汰赛绑定

Question

我正在通过 Knockout 将一些列表项绑定到下拉列表，但它没有绑定。我不知道我哪里错了..

我使用了敲除映射插件，甚至尝试了一个简单的方法，但似乎没有任何效果。

我的基本结构是这样的：

BugsReport rp = new BugsReport()
{
     SoftwareProductList = new List<SoftProduct>() { new SoftProduct() { ProductName = "eCommerce Website", SoftProId = 1 }, new SoftProduct() { ProductName = "Banking website", SoftProId = 2 } },
     ListBugs = GetAllBugs(),
     PriorityLevels = new List<Priority>() { new Priority() { PriorityId = 1, PriorityName = "P1" }, new Priority() { PriorityId = 2, PriorityName = "P2" }, new Priority() { PriorityId = 3, PriorityName = "P3" } }
};

我从控制器发送... 正常剃须刀绑定正在发生，但不是淘汰赛。

HTML部分

<div  style="margin-top: 10px; width: 200px; float: left; font-weight: bold;">
    Products
    <select id="slSoftProducts" multiple="multiple" data-bind="options: $root.ProductList, value:ProductList.SoftProId, optionsText: 'ProductList.ProductName'">. </select>
</div>
<div style="margin-top: 10px; width: 200px; float: left; font-weight: bold; margin-left: 30px;">
     priority Levels
     <select id="slPriorityLevels" multiple="multiple" data-bind="options: $root.priorityList, value: priorityList.PriorityId, optionsText: 'priorityList.PriorityName'"></select>
</div>

和 Javascript 部分

function bugzillaviewmodel(){
    var self = this;
    self.ProductList = BugList.SoftwareProductList;
    self.priorityList = BugList.PriorityLevels;                         
}     

var viewModel = new bugzillaviewmodel();

// Knock Out Binding   through mapping.. 
//var viewModel = ko.mapping.fromJS(BugList);    
ko.applyBindings(viewModel);   

Answer 1

看起来您的绑定引用不正确，您将对象附加到所需属性的名称之前。试试这个：

        <div  style="margin-top: 10px; width: 200px; float: left; font-weight: bold;">
            Products
            <select id="slSoftProducts" multiple="multiple" data-bind="options: ProductList, value: SoftProId, optionsText: 'ProductName'"></select>
        </div>
        <div style="margin-top: 10px; width: 200px; float: left; font-weight: bold; margin-left: 30px;">
            priority Levels
          <select id="slPriorityLevels" multiple="multiple" data-bind="options: priorityList, value: PriorityId, optionsText: 'PriorityName'"></select>
        </div>

您还需要创建绑定到可观察对象的属性。查看mapping plugin 以使您的视图模型具有self.ProductList 和self.priorityList 可观察属性。

我还删除了 $root 引用，因为我认为你不需要它。

Answer 2

SoftProId 和 PriorityId 没有在任何地方定义。如果它包含在 ProductList 对象中，那么它应该是这样的。

<select id="slSoftProducts" multiple="multiple" data-bind="options: ProductList.List, value: ProductList.SoftProId, optionsText: 'ProductName'"></select>

使用你的视图模型

function bugzillaviewmodel(){
   var self = this;
   self.ProductList = BugList.SoftwareProductList;
   self.priorityList = BugList.PriorityLevels;
   self.SoftProId = ko.observable();
   self.PriorityId = ko.observable();
} 

但不知道你的对象的结构我不能确定

Answer 3

你有两个问题：

1. 您在 optiosnText 中写了“ProductList.ProductName”，而不仅仅是“ProductName”
2. 对于值，它不是您所想的选项的值（html 值），而是将存储在视图模型中的变量中的值，例如“selectedProduct”，它将是可观察的

我认为这应该可行：

<div style="margin-top: 10px; width: 200px; float: left; font-weight: bold;">
    Products
    <select id="slSoftProducts" multiple="multiple" data-bind="options: ProductList, value:productSelected, optionsText: 'ProductName'">. </select> </div>
<div> style="margin-top: 10px; width: 200px; float: left; font-weight: bold;margin-left: 30px;">
priority Levels
    <select id="slPriorityLevels" multiple="multiple" data-bind="options: priorityList, value:prioritySelected, optionsText:'PriorityName'"></select>
</div>

js部分：

function bugzillaviewmodel(){
    var self = this;
    self.ProductList = BugList.SoftwareProductList;
    self.priorityList = BugList.PriorityLevels;                         
    self.productSelected = ko.observable(); // Will contain the selected product object from the ProductList
    self.prioritySelected = ko.observable(); // same but from the priorityList
}     

var viewModel = new bugzillaviewmodel();

// Knock Out Binding   through mapping.. 
//var viewModel = ko.mapping.fromJS(BugList);    
ko.applyBindings(viewModel);   

Answer 4

function bugzillaviewmodel(){
    var self = this;
    self.ProductList = BugList.SoftwareProductList;
    self.priorityList = BugList.PriorityLevels;  
    self.SelectedProductId = ko.observable();
    self.SelectedPriorityId = ko.observable();
}     

var viewModel = new bugzillaviewmodel();

// Knock Out Binding   through mapping..  
ko.applyBindings(viewModel);

<div  style="margin-top: 10px; width: 200px; float: left; font-weight: bold;">
            Products
            <select id="slSoftProducts" multiple="multiple" data-bind="options: ProductList, optionsValue: SoftProId, optionsText: 'ProductName', value: SelectedProductId"></select>
        </div>
        <div style="margin-top: 10px; width: 200px; float: left; font-weight: bold; margin-left: 30px;">
            priority Levels
          <select id="slPriorityLevels" multiple="multiple" data-bind="options: priorityList, optionsValue: PriorityId, optionsText: 'PriorityName', value: SelectedPriorityId"></select>
</div>

Answer 5

试试这个...

在服务器上，您的 Razor ViewModel 上有一个属性，该属性返回序列化对象或对象列表：

public string SelectListToJson {
        get
        {
            return JsonConvert.SerializeObject(YourSelectList);
        }
    }

在视图中有这个：

//DTO objects definition for mapping
var SoftProduct = function(dto){
	var self = this;
  self.ProductName = ko.observable(dto.ProductName);
  self.SoftProId = dto.SoftProId;
};

var Priority = function(dto){
	var self = this;
  self.PriorityId = dto.PriorityId;
  self.PriorityName = ko.observable(dto.PriorityName);
};

//Output from Razor "@Html.Raw(Model)"
//I.E. var BugList = @Html.Raw(Model)
var BugList = {
	SoftwareProductList: [
  	{ ProductName: "eCommerce Website", SoftProId: 1},
    { ProductName: "Banking Website", SoftProId: 2},
  ],
  PriorityLevels: [
  	{PriorityId: 1, PriorityName: "P1"},
    {PriorityId: 2, PriorityName: "P2"},
    {PriorityId: 3, PriorityName: "P3"},
  ]
};

//define main view model to apply bindings to
var bugzillaviewmodel = function(){
    var self = this;
    self.ProductList = ko.mapping.fromJS([]);
    self.PriorityList = ko.mapping.fromJS([]);
    self.SelectedProducts = ko.observableArray();
    self.SelectedPriorities = ko.observableArray();
};


  //init viewModel
  var viewModel = new bugzillaviewmodel();

  //map data in BugList to viewmodel
   ko.mapping.fromJS(
                   BugList.SoftwareProductList,
                   {
                       key: function (data) {
                           return ko.utils.unwrapObservable(data.SoftProId);
                       },
                       create: function (options) {
                           return new SoftProduct(options.data);
                       }
                   },
                   viewModel.ProductList);
   ko.mapping.fromJS(
                   BugList.PriorityLevels,
                   {
                       key: function (data) {
                           return ko.utils.unwrapObservable(data.PriorityId);
                       },
                       create: function (options) {
                           return new Priority(options.data);
                       }
                   },
                   viewModel.PriorityList);

  //apply bindings to dom                 
  ko.applyBindings(viewModel); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<div style="margin-bottom:20px;height:150px;">
  <div  style="margin-top: 10px; width: 200px; float: left; font-weight: bold;">
      Products<br/>
       <select id="slSoftProducts" multiple="true" data-bind="options: ProductList,optionsText: 'ProductName', optionsValue: 'SoftProId', selectedOptions: SelectedProducts"></select>   
  </div>
  <div style="margin-top: 10px; width: 200px; float: left; font-weight: bold; margin-left: 30px;">
       Priority Levels<br/>
       <select id="slPriorityLevels" multiple="true" data-bind="options: PriorityList, optionsText:'PriorityName', optionsValue:'PriorityId', selectedOptions: SelectedPriorities"></select>
  </div>
</div>


<div >
        <textarea rows="20" cols="100" data-bind="text: ko.toJSON($data, null, 2)"></textarea>
    </div>