淘汰赛 3 的数据绑定问题

Question

在我的应用程序中，我试图将引导程序和淘汰赛集成到 MVC4 中。我有两个下拉控件，用户可以从中选择一个项目，然后我使用 jQuery 填充旁边的文本框。当我使用 ViewBag 和 @foreach 循环时，这没有问题，但是当我尝试使用淘汰赛 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 永远不会更新。

好的，在获取我创建的 ViewModel 并集成点击后：function() {$root.Name(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

Bootstrap 创建的下拉菜单本身并不是真正的控件，它只是花哨的 CSS。因此，需要手动处理 Bootstrap 下拉选择。这就是淘汰赛真正有帮助的地方。

所以根据您上面的代码，我创建了一个简单的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 绑定，可以将用户选择反馈到 Knockout 视图模型中。当然，不是视图中的函数（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 结构分离。