敲除绑定

问题描述：

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

Konck出。嘻嘻。 – spender 2013-02-19 12:19:02

请为正确格式化和拼写问题付出一些努力。 – 2013-02-19 12:22:20

答

它看起来像你的绑定引用不正确，你必须预先考虑到你想要的属性的名称的对象。试试这个：

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

您还需要制作绑定到observables的属性。查看mapping plugin以使您的视图模型的self.ProductList和self.priorityList可观察的属性。

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

嗨Itried你改变它给我脚本错误... Microsoft JScript运行时错误：无法解析绑定。消息：TypeError：'SoftProId'未定义; 绑定值：选项：ProductList，值：SoftProId，optionsText：'ProductName' – Mathew 2013-02-19 12:24:28

然后您需要使Knockout的属性可观察才能使用它们。 – 2013-02-19 12:36:46

使属性观察我使用映射pluin viewModel = ko.mapping.fromJS（BugList）;这将把视图模型转换为可观察的属性。尽管如此，值仍然没有约束力。 – Mathew 2013-02-19 12:42:22

答

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

但不知道你的对象的结构，我不能肯定地告诉

我使用这个@ Html.Raw（Json.Encode（Model））;得到对象。顶部的问题已经存在。 – Mathew 2013-02-19 12:35:17

因此，在您的第一个选择变量'SoftProId'在您的视图模型中不存在，并且'PriorityId'也是如此。将这些添加到视图模型中，代码@PaulManzotti将正常工作。因为你在循环或子对象中，所以保罗也不需要$ root。 – 2013-02-19 12:42:52

'SoftProId'和'PriorityId'是你可以在问题中的控制器中使用的结构中看到它们的类的属性。当我做@ Html.Raw（Json.Encode（Model））时，我会得到同样的对象;所以两者都在iewModel .. – Mathew 2013-02-19 12:58:07

答

你有两个问题：

你写optiosnText中的'ProductList.ProductName'而不是'ProductName'
对于该值，它不是像您想的那样的选项的值（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>

答

试试这个...

在服务器上有一个返回的对象的序列化对象或名单上你的剃须刀的ViewModel属性：

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

在查看有这样的：

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

 
var Priority = function(dto){ 
 
\t 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 = { 
 
\t SoftwareProductList: [ 
 
    \t { ProductName: "eCommerce Website", SoftProId: 1}, 
 
    { ProductName: "Banking Website", SoftProId: 2}, 
 
    ], 
 
    PriorityLevels: [ 
 
    \t {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>

相关推荐