击倒绑定

本文关键字：绑定 | 更新日期: 2023-09-27 18:00:01

我正在通过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);

击倒绑定

您的绑定引用似乎不正确，您已将对象预先添加到所需属性的名称中。试试这个：

        <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>

您还需要使绑定到的属性成为可观察的。查看映射插件，使self.ProductList和self.priorityList成为视图模型的可观察属性。

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

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();
}

但由于不知道对象的结构，我无法确定

您有两个问题：

  1. 您在optiosText中写入了"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);   


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>

试试这个。。。

在服务器上，在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>

相关文章：