數據綁定問題與淘汰賽3

Question

在我的應用程序中，我試圖將引導程序和淘汰賽整合到MVC4中。我有兩個下拉控件，用戶可以從中選擇一個項目，然後使用jQuery填充旁邊的文本框。當我使用ViewBag和@foreach循環時，這種方法沒有問題，但當我嘗試使用knockout observables時，我遇到了問題。

我能夠看到我的ViewModel中的數據顯示在下拉控件中，但它不會在文本框中更新該值。是否有我應該使用的特殊的數據綁定屬性？

一些代碼...

<div class="container"> 
    <div class="col-sm-7 well"> 
     <form class="form-inline" action="#" method="get"> 
      <div class="input-group col-sm-8"> 
       <input class="form-control" value="" placeholder="Work Section" name="q" type="text"> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         <li data-bind="foreach: Names"> 
          <a href="#" data-bind="text: Name, value: Name"></a> 
         </li> 
        </ul> 
        <input name="category" class="category" type="hidden"> 
       </div> 
      </div> 
      <div class="input-group col-sm-8"> 
       <input class="form-control item" value="" placeholder="Select a Color" name="color" type="text"> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle item" data-toggle="dropdown">Select <span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         @foreach (var item in ViewBag.Colors) 
         { 
          <li> 
           <a href="#">@item</a> 
          </li> 
         } 
        </ul> 
        <input name="category" class="category" type="hidden"> 
       </div> 
      </div> 

的問題是該姓名的foreach因爲顏色是工作的罰款。

我正在使用它來找到頁面上的控件，並將選定的項目和地方，在輸入控件...我已經驗證，現在只適用於顏色下拉菜單。

$(function() { 
     $(".dropdown-menu li a").click(function() { 
      $(this).parents(".input-group").find('.form-control').text($(this).text()); 
      $(this).parents(".input-group").find('.form-control').val($(this).text()); 
     }); 
    }); 

我已經嘗試了兩種方法，無濟於事。讓我們先從第一個響應....

我放在我的標籤下面的頁面

$(function ViewModel() { 
    alert('Here'); // To test if the code generating the model is executed 
    this.Names = [{ name: "Person 1", name: "Person 2" }]; 

    this.selectedName = ko.observable(); 
    this.clickName = function (name) { this.selectedName = name; } 
}); 

下一頁的頂部，我把一個新的我的頁面的頂部：

<p>Current selection is <span data-bind="text: selectedName"></span></p> 

最後，我把這個代碼在引導下拉菜單：

<ul class="dropdown-menu" data-bind="foreach: Names"> 
    <li class="dropdown"> 
     <a href="#" data-bind="text: Name, value: Name, click: clickName(Name)"></a> 
    </li> 
</ul> 

下拉是空的DIV從未g^ets已更新。

OK，取我創建視圖模型和點擊後整合：函數（）{$ root.Name（名稱）;}我現在可以看到我的價值作爲更新我希望。

這裏是我的視圖模型代碼

$(document).ready(function() { 
    function ViewModel() { 
     var self = this; 
     self.Name = ko.observable(""); 

     var Names = { 
      Name: self.Name 
     }; 

     self.Name = ko.observable(); 
     self.Names = ko.observableArray([{ Name: "Brian" }, { Name: "Jesse" }, {Name: "James"}]); 
    } 

    var viewModel = new ViewModel(); 
    ko.applyBindings(viewModel); 
}); 

Answer 1

通過引導產生的下拉菜單中是不是真的這樣控制的，它只是看中CSS。因此，Bootstrap下拉選擇需要手動處理。這是Knockout 真的幫助。

因此根據上面的代碼，我創建了一個簡單的jsFiddle。

下拉將類似於此（注意foreach結合的位置是在問題的例子不同，在ul而非li）：

<ul class="dropdown-menu" data-bind="foreach: Names"> 
     <li class="dropdown"> 
      <a href="#" data-bind="text: Name, value: Name, click: function() {$root.selectedName(Name);}"></a> 
     </li> 
    </ul> 

這假定相似的視圖，模型於：

var ViewModel = function() { 
    var self = this; 

    //Properties 
    self.selectedName = ko.observable("NONE"); 
    self.Names = ko.observableArray([ 
     { Name:"Name1" }, 
     { Name:"Name2" }, 
     { Name:"Name3" }, 
    ]);  

} 

因此，通過使用該click結合，有可能養活用戶選擇回淘汰賽視圖模型。當然，不是視圖中的函數（function() {$root.selectedName(Name);}位），它最好是ViewModel的方法，但我認爲首先以這種方式顯示它是更清楚的。

Answer 2

假設你的視圖模型現在看起來像

function ViewModel() { 
    this.Names = [{name: x}, ...]; 
} 

你應該擴大如下

function ViewModel() { 
    this.Names = [{name: x}, ...]; 
    this.selectedName = ko.observable(); 
    this.clickName = function(name) { this.selectedName(name); } 
} 

然後你會把data-bind="text: selectedName"你的文本字段，並data-bind="click: clickName(Name)"您的鏈接。無需使用jQuery選擇器，因此您可以將數據交互與DOM結構分離。