Knockout Binding

Question

Я привязываю некоторые элементы списка к выпадающему меню нокаутом, но это не является обязательным. Я не знаю, где я ошибаюсь.

Я использовал плагин отображения нокаута и даже попробовал простой метод, но ничего не работает.

Моя основная структура такова:

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. Вы написали «ProductList.ProductName» в optiosnText вместо «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

Попробуйте это ...

На сервере есть свойство на бритву 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>