敲除綁定

-1

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

來源

2013-02-19 Mathew

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引用，因爲我不認爲你需要它。

來源

2013-02-19 12:18:44

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

但不知道你的對象的結構，我不能肯定地告訴

來源

2013-02-19 12:33:10

我使用這個@ 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);

來源

2015-03-08 05:09:27

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>

來源

2015-09-15 13:40:48

試試這個...

在服務器上有一個返回的對象的序列化對象或名單上你的剃鬚刀的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>

來源

2015-12-11 18:22:43

回答

相關問題