淘汰赛绑定

时间:2013-02-19 12:11:25

标签: c# asp.net-mvc-3 knockout.js knockout-mapping-plugin knockout-2.0

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

5 个答案:

答案 0 :(得分:0)

看起来您的绑定引用不正确,您将对象添加到所需属性的名称前面。试试这个:

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

您还需要创建绑定到observable的属性。请查看mapping plugin以制作视图模型的self.ProductListself.priorityList可观察属性。

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

你有两个问题:

  1. 您在optiosnText中写了'ProductList.ProductName'而不只是'ProductName'
  2. 对于该值,它不是您正在考虑的选项的值(html值),而是它将存储在视图模型中的变量中的值,例如“selectedProduct”将是一个可观察到的
  3. 我认为这应该有效:

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

答案 3 :(得分:0)

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>

答案 4 :(得分:0)

试试这个......

在服务器上有一个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>