数据绑定问题与淘汰赛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结构分离。